/*
Theme name: linktree-theme2
Description: Link Tree
*/

html {
	font-size: 62.5%;
	/* 16px * 62.5% = 10px */
	width: 100%;
}

body {
	color: #000;
	/* RGB */
	font-family: "Hiragino Mincho ProN","Hiragino Mincho Pro",'Zen Old Mincho', serif;
	font-style: normal;
	font-weight: 400;
	font-size: 1.6rem;
	line-height: 1.8;
	background-color: #fff;
	height: 100%;
	overflow-x: hidden;
}

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0px;
	padding: 0px;
}

img {
    width: 1920px;
    height: auto;
    vertical-align: bottom;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}

a {
	text-decoration: none;
	color: #000;
}

a:visited {
	color: #000;
}

li {
	list-style: none;
}

p {
	line-height: 2;
}
header,section {
	width: 100%;
   max-width: 1920px;
   margin: 0 auto;
   overflow: hidden;
   position: relative;
}
header {
	height: 1100px;
}
#content01 {
	height: 1539px;
	position: relative;
}
#content01 img:last-child {
	bottom: 10px;
}
.link_area a img {
	width: 100%;
	height: auto;
}
.course_link01 {
	position: relative;
	height: 1164px;

}
.course_link01 a {
	position: absolute;
	left: 50%;
	bottom: 27%;
	transform: translatex(-50%);
	max-width: 800px;
    display: block;
    width: 100%;
}
.course_link02 {
	position: relative;
	height: 814px;
}
.course_link02 a {
	position: absolute;
	left: 50%;
	bottom: 51%;
	transform: translatex(-50%);
	max-width: 800px;
    display: block;
    width: 100%;
}

#content02 {
	height: 4060px;
}
#content03 {
	height: 4696px;
}
#content03 img:last-child {
	bottom: 0;
}
#content04 {
	height: 2144px;
}
#content05 {
	height: 6944px;
}
#content06 {
	height: 1709px;
}
#content07 {
	height: 4711px;
}
#content08 {
	height: 1222px;
}
#content09 {
	height: 4880px;
}
.content10_1 {
	position: relative;
	height: 2010px;
}

.content10_1 a {
	position: absolute;
	left: 50%;
	bottom: 16%;
	transform: translatex(-50%);
	max-width: 800px;
    display: block;
    width: 100%;
}
.content10_2 {
	position: relative;
	height: 1480px;
}
.content10_2 a {
	position: absolute;
	left: 50%;
	bottom: 21%;
	transform: translatex(-50%);
	max-width: 800px;
    display: block;
    width: 100%;
}
.content10_3 {
	position: relative;
	height: 1588px;
}
.content10_3og {
	position: relative;
	height: 10588px;
}
.content10_4 {
	position: relative;
	height: 5717px;
}
.content10_5 {
	position: relative;
	height: 3324px;
}
#content11 {
	height: 4484px;
}
#content12 {
	height: 2105px;
}
.content13_1 {
	position: relative;
	height: 1422px;
}
.content13_1 a {
	position: absolute;
	left: 50%;
	bottom: 21%;
	transform: translatex(-50%);
	max-width: 800px;
    display: block;
    width: 100%;
}
.content13_2 {
	position: relative;
	height: 791px;
}
.content13_2 a {
	position: absolute;
	left: 50%;
	bottom: 37%;
	transform: translatex(-50%);
	max-width: 800px;
    display: block;
    width: 100%;
}
.content13_3 {
	position: relative;
	height: 1296px;
}

#content14 {
	height: 4897px;
}
iframe {
	position: absolute;
    width: 800px;
    height: auto;
    aspect-ratio: 16 / 9;
    left: 50%;
    transform: translateX(-50%);
}
.voice1 {
	top: 1253px;
}
.voice2 {
	top: 1983px;
}
.voice3 {
	top: 2713px;
}
.voice4 {
	top: 3446px;
}
.voice5 {
	top: 4177px;
}
.voice6 {
	top: 4909px;
}
#content15 {
	height: 2562px;
}
#content16 {
	height: 3494px;
}
#content17 {
	height: 3660px;
}

.Item {
	opacity: 0;
	animation: fadeIn 2s linear;
    animation-fill-mode: both;
}

@keyframes fadeIn{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}

/*フェードインしながら上へスライド*/
.inviewfadeInUp {
        opacity: 0;
        transform: translate(-50%, 60px);
        -webkit-transform: translate(-50%, 60px);
        transition: .8s;
    }
    
.fadeInUp {
	opacity: 1.0;
	transform: translate(-50%, 0);
	-webkit-transform: translate(-50%, 0);
}

/*フェードイン */
.inviewfadeIn {
	opacity: 0;
	transition: .8s;
}
.fadeIn {
	opacity: 1.0;
}
/*----- ズームイン -----*/
.inviewzoomIn {
	transform: scale(0, 0);
	-webkit-transform: scale(0, 0);
	transition: .8s;
}
.zoomIn {
	transform: scale(1, 1);
	-webkit-transform: scale(1, 1);
}
/* 下から */

.fadeUp{
animation-name:fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/*==================================================
ふわっ
===================================*/

/* その場で */
.fadeIn{
animation-name:fadeInAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* 下から */

.fadeUp{
animation-name:fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/* 上から */

.fadeDown{
animation-name:fadeDownAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeDownAnime{
  from {
    opacity: 0;
  transform: translateY(-100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.fadeInTrigger,
.fadeUpTrigger,
.fadeDownTrigger{
    opacity: 0;
}

/*==================================================
じわっ
===================================*/

.blur{
  animation-name:blurAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
}

@keyframes blurAnime{
  0% {
     filter: blur(10px);
     opacity: 0;
  }
	50% {
     filter: blur(5px);
     opacity: 0.5;
  }
  100% {
     filter: blur(0);
     opacity: 1;
  }
}
 
.blurTrigger{
    opacity: 0;
}


/*投稿ページ*/
.page main {
	width: 95%;
	max-width: 980px;
	margin: 0 auto 60px;
}
.page h1 {
	padding: 60px 0;
	line-height: 1.2;
	text-align: center;
	font-weight: 900;
	font-size: 3rem;
}
.page .container {
	max-inline-size: max-content;
   margin-inline: auto;
}
.page h2 {
	font-size: 2.2rem;
	font-weight: 900;
	margin-bottom: 20px;
		line-height: 1.2;
}
.page h3 {
	font-size: 2rem;
	font-weight: 900;
	margin: 40px auto 20px;
	line-height: 1.2;
}

/*footer*/
footer {
	background: #c50c11;
	padding: 30px 0;
	font-size: 1.8rem;
}
.copyright {
	color: #fff;
	font-weight: 600;
	width: 95%;
	max-width: 980px;
	margin: 0 auto;
}
.copyright p {
	text-align: center;
}
.copyright a {
	color:#fff;
}
.menu-f_nav-container {
	margin: 10px 0;
}
.copyright ul {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px 20px;
}

@media (max-width: 1080px) {
	header, #content01, #content02, #content03, #content04, #content05, #content06, #content07, #content08, #content09,#content11,#content12,#content13,#content14,#content15,#content16,#content17 {
		position: static;
      height: auto;
	}
	.link_area {
		overflow: hidden;
	}
	.content10_1,.content10_2,.content10_3,.content10_3og,.content10_4,.content10_5,.content13_1,.content13_2,.content13_3,.course_link01,.course_link02 {
		height: auto;
	}
	.course_link01 a img,.course_link02 a img {
		transform: none;
	}
	.course_link01 a {
		bottom: 5%;
	}
	.course_link02 a {
		bottom: 20%;
	}
	
	header img,section img:not(.link_area a img),.course_link01 img,.course_link02 img {
		position: static;
		width: 190%;
		transform: translateX(-45vw);
	}
	header,#content01,#content03,#content14  {
		position: relative;
	}
	header img:nth-child(2),#content03 img:nth-child(2){
		position: absolute;
      transform: translateX(-50%);
      top: 0;
	}
	#content01 img:last-child {
		position: absolute;
		transform: translateX(-50%);
	}
	#content03 img:last-child {
		position: absolute;
	}
	.content10_3og img {
		width: 192% !important;
		transform: translateX(-46vw) !important;
	}
	.link_area a {
		 width: 75%;
	}
	.cta {
		padding: 20px 0;
	}
	.cta img {
		width: 75%;
	}
	iframe {
		width: 78%;
	}
	.voice1 {
		top: 25.65%;
	}
	.voice2 {
        top: 40.55%;
	}
	.voice3 {
		top: 55.5%;
	}
	.voice4 {
		top: 70.4%;
	}
	.voice5 {
		top: 85.35%;
	}

	
	.page h1 {
		font-size: 2.4rem;
		padding: 30px 0;
	}
	.page h2 {
		font-size: 2rem;
		margin-bottom: 10px;
	}
	.page h3 {
		margin: 30px auto 10px;
	}
	footer {
		font-size: 1.6rem;
	}
}