@charset "utf-8";
:root {
  --color-main: #ff8c82;
}
@media screen and (min-width:768px) {
  body #titles .box:has(.single) {
    min-height: 150px;
    top: 110px;
  }
}
#loginbtn {
  text-align: center;
  line-height: 0;
  margin: -65px auto 80px;
  position: relative;
  z-index: 3;
}
#loginbtn ul {
  display: flex;
  justify-content: center;
  letter-spacing: -0.4em;
  text-align: left;
  line-height: 0;
  border-radius: 8px;
  padding: 20px;
  background: rgb(34,136,255);
  background: linear-gradient(to right, rgba(34,136,255,1) 0%,rgba(0,187,119,1) 100%);
  width: fit-content;
  margin-inline: auto;
}
#loginbtn ul > li {
  letter-spacing: normal;
  font-size: 1.6rem;
  gap: 20px;
  position: relative;
  text-align: center;
}
#loginbtn ul > li > span {
  display: block;
  font-size: 1.6rem;
  color: #fff;
  line-height: 120%;
  margin: 0 auto 15px;
}
#loginbtn ul > li > p.btn > a {
  display: block;
  line-height: 60px;
  color: #333;
  background: #fff;
  border-radius: 5px;
  font-weight: bold;
  box-shadow: 0 0 4px 0 rgba(20,29,29,.05),0 12px 14px 0 rgba(20,29,29,.08);
  position: relative;
  transition: 0.3s ease-in-out;
  width: 296px;
  &:hover {
    text-decoration: none;
    background: #f5f5f5;
  }
}
#loginbtn ul > li > p.btn > a::after {
  position: absolute;
  top: 50%;
  right: 20px;
  display: block;
  content: '';
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-top: 1px solid #2288ff;
  border-right: 1px solid #2288ff;
  transform: rotate(45deg);
}
@media screen and (max-width: 767px) {
  #loginbtn {
    margin: 0 auto 50px;
  }
  #loginbtn > .inner {
    padding: 0;
  }
   #loginbtn > .inner > ul {
    border-radius: 0;
    width: 100%;
     box-sizing: border-box;
  }
   #loginbtn > .inner > ul > li {
  }
}
/*flex-boxのカラム*/
.list-flex {
  --gap: 30px;
  --number: 3;
}
.list-flex .title {
  font-size: 1.8rem;
  margin-block: 20px;
}
@media screen and (min-width:768px){
  .list-flex {max-width: 890px;margin-inline: auto;}
}
@media screen and (max-width:767px){
  .list-flex {
    --gap: 20px;
    --number: 1;
  }
}
.tomonokai, .border-box {
  border: 1px solid #ddd;
  padding: min(7vw, 40px) min(5vw, 40px);
}
.tomonokai {max-width: 890px;margin-inline: auto;border: 1px solid #2288ff}
#contents .tomonokai h3 {color: #2288ff}
.border-box {
  padding: 20px;
  background: rgba(255,255,255,0.5);
}
@media screen and (max-width:767px){
  #contents .tomonokai h3 {text-align: center;margin-bottom: 20px}
}
/*流れ*/
#contents ul.step{
	display: block;
	line-height: 0;
	margin: 0 auto 40px;
}
#contents ul.step>li{
	display: block;
	letter-spacing: -0.4em;
	text-align: left;
	line-height: 0;
	background: #f5f5f5;
	border-radius: 8px;
	padding: 40px 40px 30px;
	margin: 0 auto 55px;
	position: relative;
}
#contents ul.step>li:nth-last-child(n+2):after{
	content: '';
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 15px 15px 0 15px;
	border-color: #2289ff transparent transparent transparent;
	position: absolute;
	bottom: -35px;
	left: 50%;
	margin-left: -15px;
}
#contents ul.step>li:last-child{
	margin-bottom: 0;
}
#contents ul.step>li>p.img,
#contents ul.step>li>.text{
	display: inline-block;
	letter-spacing: normal;
	vertical-align: top;
}
#contents ul.step>li>p.img{
	width: 200px;
	height: auto;
	margin: 0 40px 0 0;
}
#contents ul.step>li>.text{
	width: 880px;
}
#contents ul.step>li>.text h3{
	font-size: 2.4rem;
	font-weight: bold;
	padding: 0 0 20px;
	border-bottom: 2px solid #ddd;
	margin: 0 auto 20px;
}
#contents ul.step li h3>span{
	display: inline-block;
	font-size: 2rem;
	color: #fff;
	background: #5ec1ff;
	width: 240px;
	text-align: center;
	margin: 0 20px 0 0;
	vertical-align: middle;
	line-height: 40px;
	border-radius: 20px;
}
#contents ul.step>li>.text p{
	margin: 0 auto 20px;
	font-size: 1.6rem;
}
#contents ul.step>li>.text p:last-child{
	margin-bottom: 0;
}
@media screen and (max-width:767px) {
  #contents .account>.target>a.sp{
		display: block;
		padding: 4px 0 0;
		/* border-bottom: 1px solid #ddd; */
		line-height: 59px;
		font-size: 1.6rem;
		text-align: center;
		color: #fff;
		text-decoration: none;
		position: relative;
		cursor: pointer;
    margin-inline: 10px;
    border-radius: 10px;
    background: #2288ff;
    margin-bottom: 5px;
	}
	#contents .account>.target>a.sp.active{
		/* color: #2288ff; */
    border-radius: 10px 10px 0 0;
	}
	#contents .account>.target>a.sp:before{
		/* content: ''; */
		width: 100%;
		height: 4px;
		background: #ddd;
		position: absolute;
		top: 0;
		left: 0;
	}
	#contents .account>.target>a.sp.active:before{
		background: rgb(34,136,255); /* Old browsers */
		background: linear-gradient(to right,  rgba(34,136,255,1) 0%,rgba(0,187,119,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	}
	#contents .account>.target>a.sp:after{
		position: relative;
		top: -0.25em;
		display: inline-block;
		content: '';
		width: 8px;
		height: 8px;
		margin-left: 5px;
		border-top: 1px solid #fff;
		border-right: 1px solid #fff;
		transform: rotate(135deg);
	}
	#contents .account>.target>a.sp.active:after{
		width: 10px;
		border-right: none;
		top: 0.125em;
		transform: rotate(0deg);
	}
  #contents ul.step {
    padding: 0;
  }
  #contents ul.step > li {
    display: block;
    width: auto;
    margin: 0 auto 35px;
    min-height: 1px;
    letter-spacing: normal;
    padding: 20px;
  }
  #contents ul.step > li:last-child {
    margin-bottom: 0;
  }
  #contents ul.step > li:after {
    bottom: -26px;
  }
  #contents ul.step > li h3 {
    font-size: 2rem;
    font-weight: bold;
    padding: 0;
    line-height: 30px;
    margin: 0 auto 10px;
    text-align: center;
  }
  #contents ul.step > li h3 > span {
    display: block;
    margin: 0 auto 15px;
    line-height: 40px;
  }
  #contents ul.step > li > p.img {
    display: block;
    line-height: 0;
    width: 120px;
    height: auto;
    margin: 0 auto 10px;
  }
  #contents ul.step > li > .text {
    display: block;
    width: auto;
  }
  #contents ul.step > li > p.step-img img {
    height: 109px;
  }
  #contents .account ul.step {
    margin: 20px;
  }
  #contents .account ul.step > li {
    padding: 30px 20px 30px;
  }
  #contents .account ul.step > li:last-child {
    margin-bottom: 0;
  }
  #contents .account ul.step > li:after {
    bottom: -26px;
  }
  #contents .target[data="shop"]:not(:has(.sp.active)) { margin-bottom: 0 !important;}
  #contents .account>.target>a.sp:not(.active) + ul {
    display: none; /* タブ閉じている状態をデフォルトにする */
  }
}
/*相談会*/
#contents .columns {
  position: relative;
  margin: 0 auto;
  display: flex;
  width: fit-content;
  gap: 20px 50px;
  align-items: center;
}
#contents .columns > div:first-child img {
  max-width: 360px;
  height: auto;
}
@media screen and (max-width:767px) {
  #contents .columns {
    flex-direction: column;
  }
  #contents .columns > div:first-child img {
    max-width: 80%;
  }
}
#contents .columns ul > li {
  display: block;
  line-height: 1.5;
  border-bottom: 1px solid #ddd;
  padding: 18px 0 16px 30px;
  background: url('data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2024%2024%22%20style%3D%22enable-background%3Anew%200%200%2024%2024%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E.st0%7Bfill%3A%232288FF%3B%7D.st1%7Bfill%3Anone%3Bstroke%3A%23FFFFFF%3Bstroke-width%3A3%3Bstroke-linecap%3Around%3Bstroke-miterlimit%3A10%3B%7D%3C%2Fstyle%3E%3Cg%3E%20%3Ccircle%20class%3D%22st0%22%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2212%22%2F%3E%20%3Cpolyline%20class%3D%22st1%22%20points%3D%226.3%2C11.8%2010.3%2C15.7%2017.7%2C8.3%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E') 0 20px no-repeat;
  background-size: 24px;
  font-size: 1.8rem;
  font-weight: bold;
  text-align: left;
}
#contents .date {
  
}