@charset "utf-8";

.mainimg{
	display: block;
}

.mainimgsp{
	display: none;
}

#top-head02 {
  position: fixed; /*← fixedで固定 */
  width: 100%;
  margin: 0;
  padding: 0;
  line-height: 1;
  z-index: 99999;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .05);
  top: 0;
  left: 0;
background: #fff;
}

#top-head02 .inner {
  display: flex;
  align-items: center;
  min-height: 80px;
  padding: 0 0 0 20px;
}


.logo img {
  width: 180px
}

#top-head02 .btnsp {
  margin-left: auto; /* ← これが決定打 */
}


#top-head02 .btnsp {
  display: flex;
  align-items: center;
  padding: 0 25px;
  height: auto;
  line-height: normal;
  background: #fc9b03;
}

#top-head02 .btnsp a{
	color: #fff;
	text-decoration: none;
}

#top-head02 {
  height: auto;
}





#mainimg .inner{
  width: 1000px;
  margin: 0 auto;
  position: relative;
}

#mainimg .inner img{
  width: 100%;
}

.catch{
  width: 600px;
  margin: 0 auto;
	padding:60px 30px;
}

.catch h2 img{
  width:90%;
	margin: 0 auto;
	display: block;
}


h4.target{
	background: #060;
	padding: 10px;
	color: #fff;
	text-align: center;
	font-size: 21px;
	margin-bottom: 20px;
	font-weight: bold;
}

.note{ font-size: 21px;text-align: center; margin-top: 20px;}


.about .inner{
  width: 1000px;
	padding: 30px;
	margin: 0 auto;
}

.about h3{
	background: #060;
	padding: 10px;
	color: #fff;
	text-align: center;
	font-size: 21px;
	margin-bottom: 40px;
	font-weight: bold;
}

.about p img{
	width:50%;
	display: block;
	margin: 0 auto;
	vertical-align: bottom;
}


.howto .inner{
  width: 1000px;
	margin: 0 auto;
	padding:50px 20px 30px;
}

.howto{
	margin: 0;
	background: #e8edea;
}

.howto .inner p img{
	width: 60%;
	margin: 0 auto;
}


.reason .inner{
  width: 1000px;
	margin: 0 auto;
	padding:30px 20px 30px;
}

.reason{
	margin: 0;
}

.reason h3{
	background: #060;
	padding: 10px;
	color: #fff;
	text-align: center;
	font-size: 21px;
	margin-bottom: 30px;
	font-weight: bold;
}

.container {
  display: flex;
  justify-content: center; /* 左右中央 */
  /* align-items は指定しない */
}

.reason ol {
  list-style: none;
  margin: 0;
  padding: 0 10px;
  counter-reset: number;
	text-align: left;
}

.reason ol li {
  position: relative;
  padding-left: clamp(44px, 10vw, 56px);
  margin-bottom: 24px;
  counter-increment: number;
  font-size: clamp(14px, 3.5vw, 16px);
  line-height: 1.5;
}

/* ● 緑＋数字白：上下左右中央 */
.reason ol li::before {
  content: counter(number);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);

  width: clamp(32px, 6vw, 38px);
  height: clamp(32px, 6vw, 38px);
  border-radius: 50%;
  background-color: #060;
  color: #fff;

  display: flex;
  align-items: center;
  justify-content: center;

  font-weight: 700;
  font-size: clamp(13px, 3.5vw, 18px);
}

.reason ol li strong{
	font-weight: bold;
  font-size: clamp(18px, 3.5vw, 26px);
}

.reason p.txt03 {
  font-size: clamp(13px, 3.5vw, 21px);
  line-height: 1.5;
	text-align: center;
}


@media screen and (max-width:999px) {
#mainimg .inner,.about .inner,.reason .inner,.howto .inner{
  width:auto;
}

.note{ font-size: 18px;}
	
}


@media screen and (max-width:700px) {
.catch {
    width: auto;
	}
.catch h2 img{
  width:85%;
	margin: 0 auto;
	display: block;
	text-align: center;
}
	
.about p img {width: 70%;}
.howto .inner p img {width: 80%;}
	
}


@media screen and (max-width:599px) {
.mainimg{
	display: none;
}

.mainimgsp{
	display:block;
}
.logo img {width: 130px}

.catch{
  width:auto;
padding:40px 20px;
}	
	
.catch h2 img{
  width:80%;
	margin: 0 auto;
}
	
h4.target,.reason h3,.about h3{font-size: 18px;}
	
.note{ font-size: 16px;}

.about p img {width: 80%;}	
.howto .inner p img {width: 88%;}
	
}

@media screen and (max-width:360px) {
.about p img {width: 90%;}	
.howto .inner p img {width: 92%;}
}

@media screen and (max-width:320px) {
.logo img {width: 110px}
#top-head02 .inner {min-height: 70px;}
.note{ font-size: 14px;}
.howto .inner p img {width: 98%;}
}