/* front-page.css */

/* Container */
.container {
  width:90%;
	max-width:1050px;
  margin: 0 auto;
}

/* Hero Section */
.hero {
	height:100svh;
	max-height:800px; /* media max-height:800px */
	text-align: center;
  padding: 9em 2em 4em;
  background-image: url('/wp-content/uploads/2025/05/main_bg_2.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
	display:flex;
	align-items:center;
	justify-content:center;
}

.hero-container {
	display: flex;
	justify-content: center;
	gap:7%;
	align-items:center;
}

.hero-right {
	width:50%;
	margin-left: ;
	overflow-x: none;
}

.hero-left {
	width:50%;
		& img {
			width: 100%;
			height: auto;
		}		
	}
}

.hero-title {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.hero-title-wrap {
  	display: flex;
	align-items: center;
	gap: 0.25em;
	margin-bottom:2.5em;
	& p {
		margin-bottom: 0;
  		font-size: 2.5rem;
		font-weight:600;
  		color: #fff;
	}
	& img {
		width: 7.5rem;
		height: auto;
	}
}

.hero-subtitle {
  font-size: 3.5rem;
  text-align: justify;
  margin-bottom: 2.5em;
  color: #fff;
  white-space: nowrap;
  font-weight:700;
}

.hero-image {
  width: 60%;
  height: auto;
  margin-bottom: 1em;
}


.hero-sp-cta-area{
	width:100%;
	& .dl-text{
		width:70%;
		margin-bottom:1.5em;
		margin-left:1em;
	}
}

.hero-store-buttons {
display: flex;
gap: 1em;
flex-wrap: wrap;
justify-content: left;
}

.hero-store-button {
  display: inline-block;
  padding: 0;
  text-decoration: none;
	& img{
		height:auto;
		max-height:60px;
	}
}


/**/
.section-about {
	padding: 5em 0;
  text-align: center;
}

.section-about .section-title {
  margin-bottom: 0.3em;
}

.section-about .section-subtitle {
  margin-bottom: 3em;
}

.section-about .columns {
  display: flex;
  justify-content: space-between;
  gap: 3em;
  text-align: left;
}

.section-about .column-left {
  flex: 1 1 50%;
}

.section-about .column-left h3 {
  line-height: 1.6;
  margin-bottom: 1.5em;
}

.section-about .column-left p {
  line-height: 1.8;
  color: #333;
}

.section-about .column-right {
  flex: 1 1 45%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.section-about .column-right img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}

/* 改行 */
.sp_br {
	display: none;
}

/*how-to*/
.section-howto {
  padding: 5em 2em;
}

.howto-box {
  background-color: #fff;
	width:90%;
  border-radius: 1em;
  padding: 3em 2em;
  max-width: 1050px;
  margin: 0 auto;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.section-howto .section-title {
  margin-bottom: 0.3em;
}

.section-howto .section-subtitle {
  margin-bottom: 2em;
}

.howto-steps {
  display: flex;
  flex-direction: column;
  gap: 2.5em;
}

.howto-step {
  display: flex;
  gap: 2em;
  align-items: center;
  text-align: left;
  width:80%;
	margin:auto;
}

.howto-img{
	width:40%;
	max-width:300px;
	
 & img {
  width: 100%;
}
}

.howto-text{
	width:60%;
	& h3 {
  margin-bottom: 0.5em;
	}
	& p {
  color: #333;
  line-height: 1.7;
	}
}
		

/*ユーザー機能*/
.section-user {
  background-color: #fff;
  padding: 4em 2em;
  text-align: center;
}

.section-user .section-title {
  margin-bottom: 0.3em;
}

.section-user .section-subtitle {
  margin-bottom: 2em;
}

.user-feature {
  display: flex;
  align-items: center;
  gap: 1.5em;
  max-width: 460px;
  margin: 0 auto 2em;
  text-align: left;
}

.user-img {
	width:20%;
	& img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 8px;
	}
}

.user-text{
	width:80%;
	& h3 {
  margin-bottom: 0.3em;
}
	& p {
  color: #333;
  line-height: 1.6;
		margin-bottom:0.25em;
		& small{
			display:block;
			line-height:1.5;
			font-size:1.4rem;
			margin-top:0.5em;
		}
}
}

/*規約*/
.section-terms {
  padding: 4em 2em;
  text-align: center;
}

.section-terms .section-title {
  margin-bottom: 0.3em;
  color: #fff;
}

.section-terms .section-subtitle {
  color: #fff;
  margin-bottom: 2em;
}

.terms-box {
  background-color: #fff;
  border-radius: 12px;
  padding: 2em 0 2em 2em ;
  max-width: 800px;
  margin: 0 auto;
  text-align: left;
  line-height: 1.8;
  line-height: 1.6;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  /* Firefox scrollbar support */
  scrollbar-color: #ccc #f0f0f0;
  scrollbar-width: thin;
	position:relative;
	& div{
		margin:0;
		overflow-y: auto;
		height: 100%;
		 max-height: 400px;
		padding-right:1.75em;
		& h5{
			font-size:1.6rem;
		}
		& p{
			text-align:justify;
			font-size:1.5rem;
		}
		& ol{
			list-style:decimal;
			margin-bottom:1em;
			& li{
			font-size:1.5rem;
			margin:0 0 0.5em 2em;
		}
		}
		& ul {
  list-style: none;
  counter-reset: number;
			margin-bottom:1em;
			& li {
  position: relative;
  padding-left: 2.5em;
				font-size:1.5rem;
				margin:0 0 0.5em 1em;
}
& li::before {
  counter-increment: number;
  content: '（' counter(number) '）';
  position: absolute;
  left: 0;
}
		}
		
	}
}

/* WebKit系ブラウザのスクロールバー */
.terms-box::-webkit-scrollbar {
  width: 12px;
}

.terms-box::-webkit-scrollbar-track {
  background: #f0f0f0;
  border-radius: 10px;
  margin: 8px; /* ← 上下の丸みと重ならないよう余白 */
}

.terms-box::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 10px;
  border: 3px solid #f0f0f0; /* トラックと同色でスペース感を出す */
}


/*ダウンロード*/
.section-download {
  background-color: #fff;
  padding: 4em 2em 6em;
}

.section-download .section-title {
  margin-bottom: 0.3em;
	text-align:center;
}

.section-download .section-subtitle {
  margin-bottom: 3em;
	text-align:center;
}

.two-columns {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2em;
  align-items: center;
}

.download-text {
  width:45%;
	position: relative;
	& h3 {
		margin-bottom: 0.5em;
  		color: #007BCE;		
	}
	& p {
		
	}
	& .section-title {
		text-align:center;
		left: 50%;
		transform: translateX(50%);
	}
	& .section-subtitle {
		text-align:center;
		left: 50%;
		transform: translateX(50%);
	}
}

.download-cta {
  margin-top: 2em;
  position: relative;
  width:fit-content;
}

.cta-message {
  color: var(--text-head);
  margin-bottom: 1em;
  display: flex;
  text-align:center;
  justify-content: center;
  align-items: center;
  &:after, &:before {
	  content: "";
	  background: #007BCE;
	  width: 2px;
	  height: 2em;
	  margin: 0 1em;
	  margin-top: -.2em;		
  }
  &:after {
		margin-left: 15px;
	  transform: rotate(30deg);
  }
  &:before {
		margin-right: 15px;
   transform: rotate(-30deg);
  }
	& span {
		display: block;
		font-weight: 600;
	}
	& em {
		font-style: normal;
		font-weight: 600;
		font-size: 2.5rem;
	}
}

.store-buttons {
	display: flex;
	gap: 1em;
	flex-wrap: wrap;
	justify-content: left;
}

.store-button {
  display: inline-block;
  padding: 0;
  text-decoration: none;
	& img{
		height:auto;
		max-height:65px;
	}
}


.download-image {
  width:50%;
  text-align: center;
  display: flex;
  gap: 2em;
}

.download-image img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}

.download-image-left {
	width: 100%;
	height: auto;
	flex: 1;
}

.download-image-right {
	flex: 2;
	& img {
		&:first-child {
			width: 30%;
			height: 30%;
			margin: auto;
		}
	}
}


/*セクション オーナーズ*/
.section-owners {
	padding: 5em 0;
	text-align: center;
}

.section-owners .section-title {
  margin-bottom: 0.3em;
}

.section-owners .section-subtitle {
  margin-bottom: 3em;
}

.section-owners .columns {
  display: flex;
  justify-content: space-between;
  gap: 3em;
  text-align: left;
}

.section-owners .column-left {
  flex: 1 1 50%;
}

.section-owners .column-left h3 {
  line-height: 1.6;
  margin-bottom: 1.5em;
}

.section-owners .column-left p {
  line-height: 1.8;
  color: #333;
}
.patent-no{
	font-size:1.4rem;
	display:block;
	margin-top:0.5em;
}

.section-owners .column-right {
  flex: 1 1 45%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.section-owners .column-right img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}

.section-owners .column-left a {
  display: block;
	width: fit-content;
}

.contact-btn {
	background: var(--bg-main);
    text-align: center;
    border-radius: 100px;
    color: #fff;
	display:inline-block;
	padding:1em 3em;
}

/*お問い合わせページ*/
.smf-progress-tracker__item[aria-current=true] .smf-progress-tracker__item__number {
	background-color: var(--text-head);
}
.smf-progress-tracker__item[aria-current=true] .smf-progress-tracker__item__text { 
	color: var(--text-head);
}
.smf-action .smf-button-control__control {
	border-radius: 100px;
}


@media (min-height: 800px) {
		/* 高さ800px以上の適応 */
		/* Heroイメージが800px上限*/
		.hero-sp-cta-area {
			top: calc(800px + 60px);
		}
}

/* モバイル対応 */
@media (max-width: 768px) {
/* Container */
.container {
  width:80%;
}
	/*共通*/
	h2 {
		white-space: nowrap;
	}
	.section-title {
		text-align: center;		
	}
	.section-subtitle {
		text-align: center;
	}
	
/* Hero Section */
.hero {
	text-align: center;
	padding: 4.5em 0 0;
	background-image: url('/wp-content/uploads/2025/06/main_sp_bg.webp');
  background-size: cover;
  background-position: bottom;
  background-repeat: no-repeat;
	display:flex;
	align-items: flex-start;
	justify-content:center;
	max-height:900px;
	height:auto;
}
	
	.hero-title-wrap {
		justify-content: center;
		align-items: center;
		margin-bottom: 1rem;
		gap: 0.5em;
		& p {
		   font-size: 2rem;
		}
		& img {
			width: 8rem;
		}
	}
	.hero-subtitle {
		text-align: center;
		font-size: 2.25rem;
		margin-top: 1em;
	}
	.hero-container {
		width:100%;
		flex-wrap:wrap;
		margin-top:3em;
		& .store-buttons {
			display: flex;
			justify-content: center;
			gap: 1em;
			flex-wrap: nowrap;
			max-height: 60px;
		}
	}
	.hero-left {
		width: 90%;
			& img {
				width:92%;
			}
		}

	.hero-right {
		width:100%;
		position:relative;
	}
	.hero-sp-cta-area {
		background: #32a2d3;
		width:100%;
		padding: 0.1em 0 0.1em;
		& .dl-text {
			width: 60%;
			margin:2em auto 2em;
	}
}

.hero-store-buttons{
	justify-content:center;
	margin-bottom:2em;
}
	
.hero-store-button{
& img {
max-height: 46px;
}
}
	
/*利用方法 モバイル*/
.section-howto {
    padding: 5em 0;
}
  .howto-box {
	    width:90%;
		padding: 3em 1em;
  }
  .howto-step {
    flex-direction: column !important;
    text-align: center;
	width: 100%;
  }

  .howto-img {
	width: 85%;
  }
  .howto-text {
	width: 100%;
  }
	
/*ユーザー機能*/
.section-user {
  padding: 4em 0;
}

.section-user .section-title {
  margin-bottom: 0.3em;
}

.section-user .section-subtitle {
  margin-bottom: 2em;
}

.user-feature {
  flex-wrap:nowrap;
  gap: 1em;
  margin: 0 auto 2em;
}

.user-img {
	width:20%;
	& img {
  		width: 100%;
  		height: auto;
  		object-fit: cover;
  		border-radius: 8px;
	}
}

.user-text{
	width:80%;
	& h3 {
  margin-bottom: 0.3em;
}
	& p {
  color: #333;
  line-height: 1.6;
}
}

	
/*規約*/	
.terms-box {
	padding: 1.25em 0 1.25em 1em ;
	& div{
		padding-right:1.5em;
		margin-right:0;
		& h5{
			font-size:1.5rem;
			text-align:center;
		}
		& p{
			font-size:1.4rem;
		}
		& ol{
			& li{
			font-size:1.4rem;
			text-align:justify;
			}
		}
		& ul {
			& li {
				font-size:1.4rem;
				}
			}
		}
	}
	
	
	
	/*改行*/
	.sp_br{
		display: block;
	}
	





	
	/* aboutモバイル対応 */

	.section-about {
		padding:4em 0;
	}
  .section-about .columns {
    flex-direction: column;
  }

  .section-about .column-left,
  .section-about .column-right {
    flex: 1 1 100%;
  }

  .section-about {
    text-align: left;
	& .columns {
		flex-wrap: wrap;
		& .column-left {
			order: 2;
			& h3 {
				text-align: center;
			}
		}
		& .column-right {
			order: 1;
		}
	}
	& .section-title {
	  }
  }
	



/*利用規約*/
.section-terms {
	padding: 4em 0;
}
	
/*アプリをダウンロード*/
	.section-download { 
	  margin-bottom: 0;
		    padding: 4em 1em;
	}
	.section-download .container{
		flex-wrap: wrap;
		flex-direction: column;
		& .download-text {
			order: 2;
			width:100%;
			& .section-title {
				margin-top: 20px;
			}
			& .section-subtitle {
			}
		}
		& .download-image {
			order: 1;
			width:100%;
			max-width: 340px;
		}
		& .store-buttons {
			gap: 1em;
		}
	}

	.cta-message {
		margin-bottom:2em;
		
		& span {
			font-size: 1.25rem;
		}
		& em {
			font-size: 2rem;
		}
	}

.store-button {
	margin:auto;
	& img{
			max-height:60px;
		}
}
	
	
/*事業主の方へ*/
	.section-owners .columns {
		flex-wrap: wrap;
		& .column-left {
			order: 2;
			& h3 {
				text-align: center;
			}
		}
		& .column-right {
			order: 1;
		}
	}
.section-owners .column-left a {
  margin:auto;
}
/*お問い合わせページ*/
	
}



/* モバイル対応 */
@media (max-width: 360px) {

}