/*==================================================
    共通
==================================================*/
html, body {
  background: #fff;
  color: #231815;
  font-family: sans-serif;
}

.wrap {
  margin-left: auto;
  margin-right: auto;
  width: 1000px;
}

.bg_color {
  background: #F3AAB1 url(../images/bg_pattern20.png) repeat;
  background-size: 133px;
}


@media screen and (min-width:751px) {
  html, body {
    font-size: 15.5px;
    font-feature-settings: 'palt';
    letter-spacing: 1px;
  } 
  .forSP {
    display: none !important;
  }
}


@media screen and (max-width:750px) {
  html, body {
    font-size: 3.024vw;
    line-height: 1.56;
    /*overflow-x: hidden;*/
  } 
  .wrap {
    width: 86.67vw;
  }
  .bg_color {
    background-size: 20vw;
  }
  img {
    max-width: 100%;
  }
  .forPC {
    display: none !important;
  }
}


/*==================================================
    ヘッダー
==================================================*/
header {
  position: relative;
  background: #390700 url(../images/bg_pattern10.png) repeat;
  background-size: 133px;
  border-bottom: 6px solid #F19DB5;
  z-index: 10;
}
header h1 {
  position: absolute;
  top: 0;
  left: 66px;
  box-sizing: border-box;
  padding-top: 8px;
  width: 238px;
  height: 122px;
  background-color: #F3AAB1;
  border-bottom: 2px solid #682E0D;
  text-align: center;
}
header nav {
  box-sizing: border-box;
  margin-left: 330px;
}
header nav,
header nav ul {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 94px;
}
header nav ul li a {
  color: #fff;
  text-decoration: none;
}
header nav ul.txt li {
  margin-right: 40px;
}
header nav ul.sns li {
  margin-right: 25px;
}
header nav ul.sns li:nth-child(1) img { width: 20px;}
header nav ul.sns li:nth-child(2) img { width: 11px;}
header nav ul.sns li:nth-child(3) img { width: 18px;}
header nav ul.sns li:nth-child(4) img { width: 19px;}

@media screen and (min-width:751px) {
  header nav .txt li {
    position: relative;
  }
  .town header nav .txt li:nth-child(4):after,
  .model header nav .txt li:nth-child(5):after,
  .inquiry header nav .txt li:nth-child(6):after,
  .contact header nav .txt li:nth-child(7):after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #F19DB5;
  }
}

@media screen and (max-width:1300px) and (min-width:751px) {
  header nav {
    flex-wrap: wrap;
    align-items: flex-start;
    padding: 18px 0 12px;
  }
  header nav ul {
    width: 100%;
    height: 25px;
  }
  header nav ul.txt li {
    margin-right: 25px;
  }
}

@media screen and (max-width:1040px) and (min-width:751px) {
  header h1 {
    left: 0;
  }
  header nav {
    margin-left: 250px;
  }
}

@media screen and (max-width:960px) and (min-width:751px) {
  header nav {
    align-items: center;
    padding: 0;
  }
  header nav ul.txt {
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 380px;
    height: auto;
  }
  header nav ul.txt li {
    padding: 8px 0;
  }
  header nav ul.sns {
    width: 170px;
  }
  .town header nav .txt li:nth-child(4):after,
  .model header nav .txt li:nth-child(5):after,
  .inquiry header nav .txt li:nth-child(6):after,
  .contact header nav .txt li:nth-child(7):after {
    bottom: 0;
  }
}

@media screen and (max-width:800px) and (min-width:751px) {
  header h1 {
    width: 29.75vw;
  }
  header nav {
    margin-left: 0;
  }
  header nav ul.txt {
    width: 45vw;
  }
  header nav ul.txt li {
    font-size: 0.85rem;
  }
}

@media screen and (max-width:750px) {
  header {
    position: fixed;
    width: 100%;
    height: 15.04vw;
    overflow: visible;
    background-size: 20vw;
    border-bottom-width: 1.33vw;
  }
  header h1 {
    left: 0;
    padding-top: 1.6vw;
    width: 38.4vw;
    height: 20vw;
  }
  header h1 img {
    width: 31.6vw;
  }
  header nav {
    display: none;
    flex-wrap: wrap;
    align-items: center;
    position: fixed;
    box-sizing: border-box;
    margin: 0;
    padding: 12vw 6.665vw;
    width: 100%;
    height: 100%;
    background: rgba(104, 46, 13, 0.9);
  }
  header nav ul.txt {
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    height: auto;
  }
  header nav ul.txt li {
    box-sizing: border-box;
    margin: 0;
    padding: 1em;
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.9);
    font-size: 4.4vw;
    text-align: center;
  }
  header nav ul.sns {
    margin: 8vw auto;
    padding: 0;
    width: 72.8vw;
    justify-content: space-between;
  }
  header nav ul.sns li {
    margin-right: 0;
  }
  header nav ul.sns li:nth-child(1) img { width: 8.4vw;}
  header nav ul.sns li:nth-child(2) img { width: 4vw;}
  header nav ul.sns li:nth-child(3) img { width: 8vw;}
  header nav ul.sns li:nth-child(4) img { width: 8.4vw;}
  
  header .nv_menu {
    position: absolute;
    top: 3.6vw;
    right: 3.6vw;
    width: 8vw;
    height: 7.73vw;
    background: url(../images/nv_menu.png) center center no-repeat;
    background-size: cover;
  }
  header .nv_menu.on {
    background-image: url(../images/nv_close.png);
  }
}


/*==================================================
    フッター
==================================================*/
footer {
  position: relative;
  padding: 108px 0 20px;
  background: #DDE2E6 url(../images/bg_pattern25.png) repeat;
  background-size: 133px;
  text-align: center;
}
footer p.bnr,
footer p.tel {
  margin-bottom: 108px;
}
footer p img:last-child {
  margin-top: 20px;
}
footer ul li {
  display: inline-block;
  margin: 0 10px 10px;
  font-size: 1.09rem;
  color: #40220F;
}

.btn--pagetop {
  position: fixed;
  top: auto;
  bottom: 30px;
  right: 82px;
  transition: .8s;
  opacity: 0;
  pointer-events: none;
}
.btn--pagetop.fix {
  opacity: 1;
  pointer-events: auto;
  transition: .8s;
}
.btn--pagetop.fit {
  position: absolute;
  top: -66px;
  opacity: 1;
  pointer-events: auto;
  transition: .8s;
}


@media screen and (max-width:750px) {
  footer {
    padding: 18.4vw 0 10px;
    background-size: 20vw;
  }
  footer p.bnr,
  footer p.tel {
    margin-bottom: 14.8vw;
  }
  footer p img:last-child {
    margin-top: 0;
  }
  footer p.bnr img,
  footer p.tel img {
    width: 65.33vw;
  }
  footer p.tel img:last-child {
    margin-top: 2.67vw;
  }
  footer p.copyright img {
    width: 61.6vw;
  }
  .btn--pagetop {
    top: -6.67vw;
    right: 4vw;
  }
  .btn--pagetop.fix {
    top: auto;
    bottom: 4vw;
  }
  .btn--pagetop.fit {
    top: -6.665vw;
  }
  .btn--pagetop img {
    width: 13.33vw;
  }
}


/*==================================================
    テキスト
==================================================*/
/* 見出し*/
h1 {
  text-align: center;
  color: #390700;
  letter-spacing: 4px;
}
h2 {
  margin-top: 115px;
  text-align: center;
  color: #390700;
  font-weight: bold;
  letter-spacing: 4px;
}
.title h1 img,
h2 img {
  margin-bottom: 10px;
}
h3 {
  text-align: center;
}

/* 文字サイズ */
small {
  font-size: 0.9em;
}
.attention {
  font-size: 0.86rem;
}

/* 強調色 */
em {
  color: #E61673;
}

/* 文字揃え */
.align--center {
  text-align: center;
}
.align--left {
  text-align: left;
}
.align--right {
  text-align: right;
}

/* リンク */
a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: .3s;
}
a:hover {
  opacity: .8;
  filter: brightness(1.1);
}

/* ボタン*/
.btns {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 150px;
}
.btn1 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 490px;
  height: 142px;
  background: url(../images/btn1@2x.png) center center no-repeat;
  background-size: cover;
  color: #fff;
  font-size: 1.74rem;
  font-weight: bold;
  letter-spacing: 3px;
}
.btn2 {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 18px;
  width: 490px;
  height: 142px;
  background: url(../images/btn2@2x.png) center center no-repeat;
  background-size: cover;
  color: #fff;
  font-size: 1.74rem;
  font-weight: bold;
  letter-spacing: 3px;
}


@media screen and (max-width:750px) {
  h1, h2 {
    font-size: 1.06rem;
    font-weight: bold;
    letter-spacing: 0.1em;
  }
  h2 {
    margin-top: 13.2vw;
  }
  h2 img {
    margin-bottom: 0;
  }
  .btns {
    flex-wrap: wrap;
    margin-top: 13.2vw;
  }
  .btn1,
  .btn2 {
    width: 65.33vw;
    height: 18.93vw;
    font-size: 1.2rem;
    text-align: center;
  }
  .btn2 {
    margin: 2.67vw 0 0;
  }
}


/*==================================================
    装飾
==================================================*/
/* 角ベベル */
.round {
  box-sizing: border-box;
  padding: 20px;
  width: 100%;
  height: auto;
  background:
    -webkit-radial-gradient(0 100%, circle, rgba(255,255,255,0) 14px, #ffffff 15px),
    -webkit-radial-gradient(100% 100%, circle, rgba(255,255,255,0) 14px, #ffffff 15px),
    -webkit-radial-gradient(100% 0, circle, rgba(255,255,255,0) 14px, #ffffff 15px),
    -webkit-radial-gradient(0 0, circle, rgba(255,255,255,0) 14px, #ffffff 15px);
  background:
    -moz-radial-gradient(0 100%, circle, rgba(255,255,255,0) 14px, #ffffff 15px),
    -moz-radial-gradient(100% 100%, circle, rgba(255,255,255,0) 14px, #ffffff 15px),
    -moz-radial-gradient(100% 0, circle, rgba(255,255,255,0) 14px, #ffffff 15px),
    -moz-radial-gradient(0 0, circle, rgba(255,255,255,0) 14px, #ffffff 15px);
  background:
    -o-radial-gradient(0 100%, circle, rgba(255,255,255,0) 14px, #ffffff 15px),
    -o-radial-gradient(100% 100%, circle, rgba(255,255,255,0) 14px, #ffffff 15px),
    -o-radial-gradient(100% 0, circle, rgba(255,255,255,0) 14px, #ffffff 15px),
    -o-radial-gradient(0 0, circle, rgba(255,255,255,0) 14px, #ffffff 15px);
  background:
    -ms-radial-gradient(0 100%, circle, rgba(255,255,255,0) 14px, #ffffff 15px),
    -ms-radial-gradient(100% 100%, circle, rgba(255,255,255,0) 14px, #ffffff 15px),
    -ms-radial-gradient(100% 0, circle, rgba(255,255,255,0) 14px, #ffffff 15px),
    -ms-radial-gradient(0 0, circle, rgba(255,255,255,0) 14px, #ffffff 15px);
  background-position: bottom left, bottom right, top right, top left;
  background-size: 50% 50%;
  background-repeat: no-repeat;
}
.round_a75 {
  box-sizing: border-box;
  padding: 20px;
  width: 100%;
  height: auto;
  background:
    -webkit-radial-gradient(0 100%, circle, rgba(255,255,255,0) 14px, rgba(255,255,255,0.75) 15px),
    -webkit-radial-gradient(100% 100%, circle, rgba(255,255,255,0) 14px, rgba(255,255,255,0.75) 15px),
    -webkit-radial-gradient(100% 0, circle, rgba(255,255,255,0) 14px, rgba(255,255,255,0.75) 15px),
    -webkit-radial-gradient(0 0, circle, rgba(255,255,255,0) 14px, rgba(255,255,255,0.75) 15px);
  background:
    -moz-radial-gradient(0 100%, circle, rgba(255,255,255,0) 14px, rgba(255,255,255,0.75) 15px),
    -moz-radial-gradient(100% 100%, circle, rgba(255,255,255,0) 14px, rgba(255,255,255,0.75) 15px),
    -moz-radial-gradient(100% 0, circle, rgba(255,255,255,0) 14px, rgba(255,255,255,0.75) 15px),
    -moz-radial-gradient(0 0, circle, rgba(255,255,255,0) 14px, rgba(255,255,255,0.75) 15px);
  background:
    -o-radial-gradient(0 100%, circle, rgba(255,255,255,0) 14px, rgba(255,255,255,0.75) 15px),
    -o-radial-gradient(100% 100%, circle, rgba(255,255,255,0) 14px, rgba(255,255,255,0.75) 15px),
    -o-radial-gradient(100% 0, circle, rgba(255,255,255,0) 14px, rgba(255,255,255,0.75) 15px),
    -o-radial-gradient(0 0, circle, rgba(255,255,255,0) 14px, rgba(255,255,255,0.75) 15px);
  background:
    -ms-radial-gradient(0 100%, circle, rgba(255,255,255,0) 14px, rgba(255,255,255,0.75) 15px),
    -ms-radial-gradient(100% 100%, circle, rgba(255,255,255,0) 14px, rgba(255,255,255,0.75) 15px),
    -ms-radial-gradient(100% 0, circle, rgba(255,255,255,0) 14px, rgba(255,255,255,0.75) 15px),
    -ms-radial-gradient(0 0, circle, rgba(255,255,255,0) 14px, rgba(255,255,255,0.75) 15px);
  background-position: bottom left, bottom right, top right, top left;
  background-size: 50% 50%;
  background-repeat: no-repeat;
}

/* リボン */
.ribbon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #D63486;
  color: #fff;
  min-height: 50px;
}
.ribbon:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent #F3AAB1 transparent transparent;
  border-width: 25px 15px 25px 0;
}

/* 二重線 */
.border-w {
  border:  solid 1px #290000;
  outline: solid 1px #290000;
  outline-offset: 3px;
  margin: 4px;
  padding: 8px 0;
  font-size: 1.13rem;
  text-align: center;
  letter-spacing: 2px;
}

@media screen and (max-width:750px) {
  .ribbon {
    min-height: 3em;
    line-height: 1;
  }
  .ribbon:after {
    border-top-width: 1.6em;
  }
}