@charset "UTF-8";

body{
	margin:0;
	background:#fff;
	color:var(--text);
}

.sp-show{display: none}

/* =================================
   Kintetsu app LP
   PC common + SP layout
   ================================= */

:root{
  --yellow:#ffe91a;
  --green:#168f4d;
  --pale:#edf6df;
  --text:#111;
  --white:#fff;
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--yellow);
  color:var(--text);
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Noto Sans JP",
    "Yu Gothic",
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}

img{
  max-width:100%;
  height:auto;
}

button{
  font-family:inherit;
}


/* =====================
 main
 ===================== */

#align-wrapper{
  text-align:center;
  padding:10% 0;
}

.align-main{
  max-width:1000px;
  margin:0 auto;
}
.align-main #align .ttlWrap {
	position: relative;
}
#align .ttlWrap .ttl {
	width: 75%;
}
#align .ttlWrap .kin {
	position: absolute;
	top: -19%;
	right: -4%;
	width: 28%;
}
#align .ttlWrap .align-txt {
	text-align: left;
	margin-top: 20px;
}
.align-main #align .Heading {
	position: relative;
}
.align-main #align .align-Heading {
	background-color: #2E9542;
	border-radius: 50px;
	color: #FFFFFF;
	font-size: 1.6em;
	font-weight: bold;
	padding: 20px 40px;
	line-height: 1.3em;
	margin-top: 5%;
	position: relative;
	z-index: 1;
}


/* =====================
 download
 ===================== */

.dl-wrapper{
	width: 100%;
	margin-top: 2%;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
	font-size: .8em;
	padding-top: 20px;
	padding-bottom: 10px;
}

.dl-wrapper .app,
.dl-wrapper .ggl{
	width: 20%;
	display: inline-block;
	margin-bottom: 3%;
}

/* =====================
 main
 ===================== */

.align-main #align .methodWrap {
	background-color: #FFFFFF;
	border-radius: 30px;
	margin-top: 5%;
	padding-bottom: 5%;
	position: relative;
}
#align .methodWrap .method-inner {
	margin-left: auto;
	margin-right: auto;
	width: 90%;
  justify-content: center;
}
.method-inner .ttl  {
	padding-top: 4%;
	padding-bottom: 8%;
	color: #359F4B;
	font-size: 1em;
	font-weight: bold;
}

.method-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 80px 30px;
	margin-bottom: 5%;
}

.method {
  width: calc((100% - 60px) / 3);
  text-align: center;
  position: relative;
}

/* 画像が大きすぎる場合 */
.method img {
  max-width: 100%;
  height: auto;
}
.method .step {
	width: 45%;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: -6%;
}
.method-txt   {
	margin-top: 10px;
	font-size: 0.9em;
}
.kin02 {
	position: absolute;
	width: 19%;
	top: -3%;
	z-index: 2;
}
.kin03 {
	position: absolute;
	width: 15%;
	left: 3%;
	top: -31%;
	z-index: 2;
  animation: mojimoji 1.5s ease-in-out infinite;
}
@keyframes mojimoji {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  50% {
    transform: translateX(5px);
  }
  75% {
    transform: translateX(-3px);
  }
}
.kin04-1   {
	position: absolute;
	width: 12%;
	top: -64%;
	right: 3%;
	z-index: 0;
}
.kin04-2   {
	position: absolute;
	width: 8%;
	top: -11%;
	z-index: 2;
	right: 5%;
}
.kin05 {
	position: absolute;
	width: 36%;
	right: -5%;
	top: -4%;
	z-index: 2;
  transform-origin: center center;
  animation: handSwing 1.2s ease-in-out infinite;
}

@keyframes handSwing {
  0%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-4deg);
  }
  50% {
    transform: rotate(0deg);
  }
  75% {
    transform: rotate(4deg);
  }
}


/* =====================
   吹き出しキンちゃん
===================== */

.title-box{
	position:relative;
	width:70%;
	margin:0 auto 2%;
}


.title-box .sub-ttl{
	width:100%;
	margin:0;
}


.kinBox{
	position: absolute;
	bottom: -79px;
	width: 107px;
	left: -117px;
	z-index: -1;
}


.kin-point img{
	width:100%;
	display:block;
}


.point{
	position: absolute;
	width: 70%;
	top: -70px;
	left: 34px;
}


.point img{
	width: 100%;
	display: block;
}


/* =====================
   fixed kin
===================== */

.fixed-kin{
	position: fixed;
	right: -67px;
	bottom: -54px;
	width: 204px;
	z-index: 100;
	opacity: 0;
	transform: translateY(20px);
	transition: .5s ease;
}

.fixed-kin > img{
	display: block;
	width: 100%;
}


/* 吹き出し兼TOPリンク */
.fixed-top{
	position: absolute;
	right: 150px;
	top: -5px;
	width: 120px;
	opacity: 0;
	transform: translateY(20px) scale(.8);
	transition: .5s ease;
}

.fixed-top img{
	display:block;
	width:100%;
}


/* スクロール後表示 */
.fixed-kin.show{
	opacity:1;
	transform:translateY(0);
}

.fixed-kin.show .fixed-top{
	opacity:1;
	transform:translateY(0) scale(1);
}

.scroll-guide{
  display:none;
}

/* =====================
 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　---------------------SP----------------------
 ===================== */

@media(max-width:481px){
	
	.pc-show{display: none}
	.sp-show{display: block}
	
.scroll-guide{
	display: flex;
	position: absolute;
	left: 1%;
	transform: translateX(-5%);
	flex-direction: column;
	align-items: center;
	opacity: 0;
	transition: opacity .5s ease;
	z-index: 10;
	bottom: 40px;
}


  .scroll-guide.show{
    opacity:1;
  }


  .scroll-text{
    font-size:11px;
    letter-spacing:.25em;
    margin-bottom:12px;
  }


.scroll-arrow{
  width:1px;
  height:35px;
  background:transparent;
  position:relative;
  overflow:hidden;
}
	

.scroll-arrow::after{
  content:"";
  position:absolute;
  left:0;
  top:-35px;
  width:1px;
  height:35px;
  background:#222;
  animation:scrollLine 1.5s ease-in-out infinite;
}


@keyframes scrollLine{

  0%{
    transform:translateY(0);
    opacity:0;
  }

  20%{
    opacity:1;
  }

  70%{
    transform:translateY(35px);
    opacity:1;
  }

  100%{
    transform:translateY(35px);
    opacity:0;
  }


  }
	
/* =====================
 main
 ===================== */

#align-wrapper{
	text-align: center;
	padding: 10% 0;
	width: 100%;
}

.align-main{
	margin: 0 auto;
	width: 90%;
}
.align-main #align .ttlWrap {
	position: relative;
}
#align .ttlWrap .ttl {
	width: 100%;
}
#align .ttlWrap .kin {
	position: absolute;
	top: 45%;
	right: -2%;
	width: 18%;
}
#align .ttlWrap .align-txt {
	text-align: left;
	margin-top: 20px;
}
.align-main #align .Heading {
	position: relative;
}
.align-main #align .align-Heading {
	background-color: #2E9542;
	border-radius: 50px;
	color: #FFFFFF;
	font-size: 1.2em;
	font-weight: bold;
	padding: 10px 20px;
	line-height: 1.3em;
	margin-top: 5%;
	position: relative;
	z-index: 1;
}


/* =====================
 download
 ===================== */

.dl-wrapper{
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
	font-size: .8em;
	padding-top: 20px;
	padding-bottom: 10px;
}

.dl-wrapper .app,
.dl-wrapper .ggl{
	width: 47%;
	display: inline-block;
	margin-top: 2%;
}

/* =====================
 main
 ===================== */

.align-main #align .methodWrap {
	background-color: #FFFFFF;
	border-radius: 30px;
	margin-top: 22%;
	padding-bottom: 5%;
	position: relative;
}
#align .methodWrap .method-inner {
	margin-left: auto;
	margin-right: auto;
	width: 90%;
  justify-content: center;
}
.method-inner .ttl  {
	padding-top: 4%;
	padding-bottom: 20%;
	color: #359F4B;
	font-size: 1.4em;
	font-weight: bold;
}

  .method-list {
	flex-wrap: wrap;
	justify-content: center;
	gap: 50px 0;
	margin-left: auto;
	margin-right: auto;
	width: 70%;
	margin-bottom: 10%;
  }

  .method {
    width: 100%;
    text-align: center;
    position: relative;
  }


/* 画像が大きすぎる場合 */
.method img {
  max-width: 100%;
  height: auto;
}
.method .step {
	width: 35%;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: -5%;
}
.method-txt   {
	margin-top: 10px;
	font-size: 0.9em;
}
.kin02 {
	position: absolute;
	width: 23%;
	top: -1%;
	z-index: 2;
	left: -3%;
}
.kin03 {
	position: absolute;
	width: 23%;
	left: -1%;
	top: 5%;
	z-index: 2;
}
.kin04-1   {
	position: absolute;
	width: 20%;
	top: -29%;
	right: 4%;
	z-index: 0;
}
.kin04-2   {
	position: absolute;
	width: 14%;
	top: -4%;
	z-index: 2;
	right: 7%;
}
.kin05 {
	position: absolute;
	width: 57%;
	right: -3%;
	top: -2%;
	z-index: 2;
}

	
/* =====================
   吹き出しキンちゃん
===================== */
	
  .fixed-kin{
	width: 67px;
	right: -19px;
	bottom: -20px;
  }
	
/* 吹き出し兼TOPリンク */
.fixed-top{
	position: absolute;
	right: 50px;
	top: -17px;
	width: 51px;
	opacity: 0;
	transform: translateY(20px) scale(.8);
	transition: .5s ease;
}
}