﻿/* パンくず 追加スタイル PC */
@media only screen and (min-width: 768px){
  .breadcrumb__list{
    padding-bottom: 1.6rem;
  }
}
.main-area {
 transform: none;
 filter: none;
 font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;  font-style: normal;
 font-weight: 400;
 width: 100%;
 margin: 0 auto;
 text-align: center;
 overflow: hidden;
 font-size: calc(24 * (100vw / 750));
 color: #2C2825;
 line-height: 1;
}
.sp_only {
 display: block;
}
.pc_only {
 display: none;
}
body {
 width: 100%;
}
.main-area img,
.main-area video,
.main-area svg {
 width: 100%;
 height: auto;
}

.main-area * {
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
}

.main-area picture {
 display: block;
}

/* ============================= ▼ タブレット ▼ == */
@media screen and (min-width: 768px) and (max-width: 1366px) {
 html {
   font-size: calc(10 * (100vw/1366));
 }
}
/* ============================= ▲ タブレット ▲ == */
/* ============================= ▼ sec-top ▼ == */
.sec-top__ttl {
 width: calc(638 * (100vw / 750));
margin: calc(60 *(100vw/750)) auto 0;}
.sec-top p{
	font-size: calc(26 *(100vw/750));
	line-height: calc(40/26);
	text-align:left;
	
	
margin: calc(75 *(100vw/750)) auto calc(75 *(100vw/750));width: calc(630 *(100vw/750));letter-spacing: 0.1em;}
/* ============================= ▲ sec-top ▲ == */
/* ============================= ▼ sec-step ▼ == */
#page-body{
  background-image: url(../img/bk-sp.jpg);
  background-size:cover;
  background-repeat:no-repeat;
}
.btn-all {
 margin-top: calc(60 * (100vw / 750));
}
.btn-all a,
.btn-online a{
	border-radius: calc(50 * (100vw / 750));
	color: #fff;
  margin: 0 auto;
  letter-spacing: 0.075em;
  
  font-size: calc(28 * (100vw / 750));
  display: inline-block;
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(630*(100vw/750));
  height: calc(100 * (100vw / 750));
	position: relative;
background: #C91616;font-weight: bold;}
.btn-all a::after,
.btn-online a::after{
	width: calc(9 * (100vw / 750));
	height: calc(15 * (100vw / 750));
	background-image: url(../img/arrow.svg);
	background-size: cover;
	content: '';
	display: block;
	position: absolute;
	top: 50%;
	right: calc(30 * (100vw / 750));
	transform: translateY(-50%);
}
.coupon-img {
 width: calc(630 * (100vw / 750));
 margin: calc(58 * (100vw / 750)) auto 0;
}
/* ============================= ▲ sec-step ▲ == */
/* ============================= ▼ sec-about ▼ == */
.sec-about {
 margin: calc(60 * (100vw / 750)) auto 0;
 background-color: #fff;
width: calc(630 * (100vw / 750));}
.sec-about__ttl {
 margin-top: calc(90 * (100vw / 750));
 font-size: calc(36 * (100vw / 750));
 color: #D87E65;
 font-weight: 800;
 letter-spacing: 0.075em;
 position: relative;
 display: inline-block;
}
.sec-about__ttl::after {
 position: absolute;
 content: "";
 background-color: #D87E65;
 height: calc(4 * (100vw / 750));
 width: 100%;
 top: calc(60 * (100vw / 750));
 left: 0;
}
.sec-about__list-wrapper {
 margin: calc(0 * (100vw / 750)) auto 0;
 width: calc(567 * (100vw / 750));
 padding-bottom: calc(30 * (100vw / 750));
padding-top: calc(30 * (100vw / 750));}
.sec-about__list {
 margin-bottom: calc(37 * (100vw / 750));
 text-align: left;
}
.sec-about__desc-ttl {
 padding: calc(17 * (100vw / 750)) calc(32 * (100vw / 750)) calc(17 * (100vw / 750)) calc(26 * (100vw / 750));
 
 background: #C91616;color: #FDF4F2;
 font-size: calc(26 * (100vw / 750));
 letter-spacing: 0.075em;
 border-radius: calc(8 * (100vw / 750));
 display: inline-block;
}
.sec-about__desc {
 margin-top: calc(16 * (100vw / 750));
 font-size: calc(26 * (100vw / 750));
 line-height: calc(48/26);
 letter-spacing: 0.1em;
}
.sec-about__list:nth-child(4) {
 margin-bottom: calc(45 * (100vw / 750));
}
.sec-about__list:last-child {
 margin-bottom: 0;
}
.w385{
	position: relative;width:calc(360 *(100vw/750));
margin-bottom: calc(100 * (100vw / 750));}
.w385::after{
  content: "";
  background-image: url(../img/box.jpg);
  width: calc(200 *(100vw/750));
  height: calc(200 *(100vw/750));
  position: absolute;
  background-repeat: no-repeat;
  background-size: 100%;
left: calc(370 *(100vw/750));top: calc(5 *(100vw/750));}
.fz12{
	font-size:calc(22 *(100vw/750));
}
/* ============================= ▲ sec-about ▲ == */
/* ============================= ▼ btn-wrapper ▼ == */
.btn-wrapper {
 margin-top: calc(80 * (100vw / 750));
}

.btn-online {
 margin: calc(30 * (100vw / 750)) auto calc(266 * (100vw / 750));
}
.btn-online a {
 margin: 0 auto;
 width: calc(630 * (100vw / 750));
 height: calc(110 * (100vw / 750));

 display: flex;
 background: #000;justify-content: center;
 align-items: center;
 font-size: calc(28 * (100vw / 750));
 letter-spacing: 0.1em;
 position: relative;
 padding: 0 calc(32 * (100vw / 750)) 0 0;
font-family: 'Outfit', sans-serif;}

/* ============================= ▲ btn-wrapper ▲ == */
/* ============================= ▼ PC ▼ == */
@media screen and (min-width: 768px) {
 /* ============================= ▲ PC ▲ == */
 /* ============================= ▼ 全体 ▼ == */
 .main-area {
   width: 136.6rem;
   margin: 0 auto;
   font-size: 2.4rem;
 }
 .sp_only {
   display: none;
 }
 .pc_only {
   display: block;
 }
 #page-body{
	 background-image: url(../img/bk.jpg);
	 background-size:cover;
	 background-repeat:no-repeat;
 }
 /* ============================= ▲ 全体 ▲ == */
 /* ============================= ▼ sec-top ▼ == */
 .sec-top__ttl {
   
   width: 78.6rem;
   margin: 8rem auto 6rem;
 }
 .sec-top p{
   font-size:1.3rem;
   line-height:2;
 text-align: center;margin: 0 auto;width: auto;}
 .fz12{
   font-size: 1.2rem;
 }
 .w385{
   position: relative;
   width: 38.5rem;
 margin: 0;}
.w385::after{
  content: "";
  background-image: url(../img/box.jpg);
  width: 14rem;
  height: 14rem;
  position: absolute;
  background-repeat: no-repeat;
  background-size: 100%;
left: 48rem;top: -4rem;}
 /* ============================= ▲ sec-top ▲ == */
/* ============================= ▼ sec-step ▼ == */
.btn-all {
 
margin: 4rem 0 0;}
.btn-all a{
 width: 40rem;
 height: 5.6rem;
 font-size: 1.6rem;
 letter-spacing: 0.11em;
 padding-right: 1.3rem;
 margin: 0 auto 0 7.5rem;
background-color: #C91616;
margin: 0 auto;font-weight: bold;}
.btn-all a::after {
 right: 2rem;
 width: 0.5rem;
 height: 0.85rem;
}
.coupon-img {
 width: 75rem;
 margin: 5.5rem auto 0;
}
/* ============================= ▲ sec-step ▲ == */
/* ============================= ▼ sec-about ▼ == */
.sec-about {
 width: 70rem;
 margin: 6.3rem auto 0;
}
.sec-about__ttl {
 margin-top: 4rem;
 font-size: 2rem;
}
.sec-about__ttl::after {
 height: 2px;
 top: 2.9rem;
}
.sec-about__list-wrapper {
 margin: 4.6rem auto 0 5rem;
 padding-bottom: 5rem;
padding-top: 5rem;}
.sec-about__list {
 width: 60rem;
}
.sec-about__desc-ttl {
 padding: 1rem 1.5rem 1rem 1.4rem;
 font-size: 1.3rem;
 border-radius: 0.4rem;
}
.sec-about__desc {
 margin-top: 0.8rem;
 font-size: 1.3rem;
 line-height: 2;
}
.sec-about__list:first-child {
 margin-bottom: 1.8rem;
}
.sec-about__list:nth-child(2) {
 margin-bottom: 2.2rem;
}
.sec-about__list:nth-child(3) {
 margin-bottom: 2.3rem;
}
.sec-about__list:nth-child(4) {
 margin-bottom: 2rem;
 width: 61.5rem;
}
.sec-about__list:last-child {
 margin-bottom: 0;
}
/* ============================= ▲ sec-about ▲ == */
/* ============================= ▼ btn-wrapper ▼ == */
.btn-wrapper {
 margin-top: 0;
}
.btn-wrapper .btn-all a {
 margin: 0 auto;
}
.btn-online {
 margin: 2rem auto 11.6rem;
}
.btn-online a {
 width: 40rem;
 height: 5.6rem;
 font-size: 1.6rem;
 padding: 0 2rem 0 0;
 
 letter-spacing: 0.08em;
}
.btn-online a::after {
 right: 2rem;
 width: 0.5rem;
 height: 0.85rem;
}
/* ============================= ▲ btn-wrapper ▲ == */

}