body {
   font-size: 16px;
   line-height: 38px;
   color: #555;
}

@media screen and (max-width: 767px) {
   body {
      font-size: 14px;
      line-height: 28px;
   }
}

@media screen and (min-width: 1441px) {
   .wrap {
      max-width: 1100px;
   }
}

.charm-ttl {
   background-color: #f5f5f5;
   letter-spacing: 0.2em;
   text-align: center;
   padding: 15px 10px;
}

@media screen and (max-width: 767px) {
   .charm-ttl {
      padding: 10px 10px;
	   font-weight:bold;
   }
}

@media screen and (min-width: 768px) {
   .h-28 {
      line-height: 60px;
	   font-weight:bold;
   }
}

#charm__kv {
   padding-top: 200px;
}

#charm__kv h1 {
   font-weight: 500;
   font-size: 42px;
   line-height: 70px;
   letter-spacing: 0.2em;
}

#charm__kv h1 span {
   display: block;
   font-size: 19px;
}

#charm__kv figure {
   padding-top: 60px;
}

#charm__kv figure img {
   width: 100%;
   max-width: inherit;
}

@media screen and (max-width: 767px) {
   #charm__kv {
      padding-top: 50px;
   }

   #charm__kv h1 {
      font-size: 28px;
      line-height: 42px;
   }

   #charm__kv h1 span {
      display: block;
      font-size: 15px;
   }

   #charm__kv figure {
      padding-top: 20px;
   }
}

#charm__sec1 {
   padding: 90px 0;
}

#charm__sec1 h2 {
   position: relative;
   padding: 27px 0;
	letter-spacing:4px;
}

#charm__sec1 h2 img {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

#charm__sec1 .txt {
   font-size: 18px;
   line-height: 60px;
   letter-spacing: 0.2em;
   padding-top: 20px;
}

@media screen and (max-width: 991px) {
   #charm__sec1 .txt {
      font-size: 16px;
   }
}

@media screen and (max-width: 767px) {
   #charm__sec1 {
      padding: 50px 0;
   }

   #charm__sec1 h2 {
      padding: 0;
   }

   #charm__sec1 .txt {
      font-size: 14px;
      line-height: 28px;
   }
}

#charm__sec2 {
   padding-bottom: 100px;
}

#charm__sec2 .box {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 32px;
   padding-top: 80px;
}

#charm__sec2 .box h3 {
   font-weight: bold;
   font-size: 18px;
   line-height: 30px;
   letter-spacing: 0.05em;
   padding-top: 30px;
}

#charm__sec2 .box h3:after {
   content: '';
   display: block;
   width: 50px;
   height: 0;
   border-top: 1px solid #d72a3c;
   margin: 15px auto 0;
}

#charm__sec2 .box .txt {
   font-size: 15px;
   letter-spacing: 0;
   line-height: 35px;
   padding-top: 30px;
}

#charm__sec2 .box .txt p+p {
   padding-top: 30px;
}

@media screen and (max-width: 767px) {
   #charm__sec2 {
      padding-bottom: 50px;
   }

   #charm__sec2 .box {
      grid-template-columns: 1fr;
      padding-top: 30px;
   }

   #charm__sec2 .box figure {
      text-align: center;
   }

   #charm__sec2 .box h3 {
      font-size: 16px;
      padding-top: 20px;
   }

   #charm__sec2 .box .txt {
      font-size: 14px;
      line-height: 28px;
      padding-top: 20px;
   }
}

#charm__sec3,
#charm__sec4,
#charm__sec5 {
   padding-bottom: 100px;
}

#charm__sec3 .desc,
#charm__sec4 .desc,
#charm__sec5 .desc {
   padding-top: 40px;
}

#charm__sec3 .box,
#charm__sec4 .box,
#charm__sec5 .box {
   display: flex;
   gap: 50px;
   padding-top: 70px;
}

#charm__sec3 .box {
   display: block;
}

#charm__sec3 .box+.box,
#charm__sec4 .box+.box,
#charm__sec5 .box+.box {
   padding-top: 90px;
}

#charm__sec3 .box figure,
#charm__sec4 .box figure,
#charm__sec5 .box figure {
   width: 388px;
}

#charm__sec3 .box .col,
#charm__sec4 .box .col,
#charm__sec5 .box .col {
   width: 663px;
}

#charm__sec3 .box h3,
#charm__sec4 .box h3,
#charm__sec5 .box h3 {
   letter-spacing: 0.1em;
	   font-weight:bold;
}

#charm__sec3 .box h3:after,
#charm__sec4 .box h3:after,
#charm__sec5 .box h3:after {
   content: '';
   display: block;
   width: 50px;
   height: 0;
   border-top: 1px solid #d72a3c;
   margin-top: 15px;
}

#charm__sec3 .box .txt,
#charm__sec4 .box .txt,
#charm__sec5 .box .txt {
   padding-top: 35px;
}

#charm__sec3 .box.img-l,
#charm__sec4 .box.img-l,
#charm__sec5 .box.img-l {
   flex-direction: row;
}

#charm__sec3 .box-1,
#charm__sec4 .box-1,
#charm__sec5 .box-1 {
   line-height: 32px;
   padding-top: 50px;
}

#charm__sec3 .box-1 p+p,
#charm__sec4 .box-1 p+p,
#charm__sec5 .box-1 p+p {
   padding-top: 25px;
}

@media screen and (max-width: 767px) {

   #charm__sec3,
   #charm__sec4,
   #charm__sec5 {
      padding-bottom: 50px;
   }

   #charm__sec3 .desc,
   #charm__sec4 .desc,
   #charm__sec5 .desc {
      padding-top: 20px;
   }

   #charm__sec3 .box,
   #charm__sec4 .box,
   #charm__sec5 .box {
      display: flex;
      flex-direction: column;
      gap: 30px;
      padding-top: 50px;
   }

   #charm__sec3 .box+.box,
   #charm__sec4 .box+.box,
   #charm__sec5 .box+.box {
      padding-top: 50px;
   }

   #charm__sec3 .box figure,
   #charm__sec4 .box figure,
   #charm__sec5 .box figure {
      width: 100%;
      text-align: center;
   }

   #charm__sec3 .box .col,
   #charm__sec4 .box .col,
   #charm__sec5 .box .col {
      width: 100%;
   }

   #charm__sec3 .box h3:after,
   #charm__sec4 .box h3:after,
   #charm__sec5 .box h3:after {
      margin-top: 10px;
   }

   #charm__sec3 .box .txt,
   #charm__sec4 .box .txt,
   #charm__sec5 .box .txt {
      padding-top: 0px;
   }

   #charm__sec3 .box.img-l,
   #charm__sec4 .box.img-l,
   #charm__sec5 .box.img-l {
      flex-direction: column;
   }

   #charm__sec3 .box-1,
   #charm__sec4 .box-1,
   #charm__sec5 .box-1 {
      line-height: 32px;
      padding-top: 50px;
   }

   #charm__sec3 .box-1 p+p,
   #charm__sec4 .box-1 p+p,
   #charm__sec5 .box-1 p+p {
      padding-top: 25px;
   }
}

#charm__sec6 {
   padding-bottom: 80px;
}

#charm__sec6 .box {
   padding-top: 80px;
}

#charm__sec6 h3 {
   letter-spacing: 0.1em;
	   font-weight:bold;
}

#charm__sec6 h3:after {
   content: '';
   display: block;
   width: 50px;
   height: 0;
   border-top: 1px solid #d72a3c;
   margin-top: 15px;
}

#charm__sec6 .txt {
   padding-top: 35px;
}

#charm__sec6 .txt p+p {
   padding-top: 35px;
}

.photo {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   padding-top: 40px;
   padding-right: 2px;
}

#charm__sec6 .catch {
   position: relative;
   margin-top: 80px;
   padding: 27px 0;
}

#charm__sec6 .catch img {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

@media screen and (max-width: 767px) {
   #charm__sec6 {
      padding-bottom: 50px;
   }

   #charm__sec6 .box {
      padding-top: 50px;
   }

   #charm__sec6 h3:after {
      margin-top: 10px;
   }

   #charm__sec6 .txt {
      padding-top: 20px;
   }

   .photo {
      grid-template-columns: 1fr;
      padding-top: 30px;
      padding-right: 0;
   }

   #charm__sec6 .catch {
      position: relative;
      margin-top: 50px;
      padding: 0;
   }

   #charm__sec6 .catch img {
   }
}

.charm_notice{
	font-size:13px;
	color:#555;
	display:block;
	margin-top:14px;
	line-height:160%;
}