@charset "UTF-8";
@import url("reset.css");

/**************************
  base
**************************/
html{
  scroll-behavior: smooth;
  overflow-x: hidden;
}
body{
    font-family:'メイリオ', 'Meiryo', sans-serif;
}
h1{
  display:block;
  z-index:5;
  position:absolute;
  left:0;
  right:0;
  top:150px;
  text-align:center;
}
h2{
    color:#D74135;
    font-size:40px;
    font-weight: 700;
    margin-bottom:30px;
}
h2 + p{
    font-size:20px;
    font-weight: 700;
}
h3{
    font-size:42px;
    font-weight: 700;
    margin-bottom:40px;
}
h3:after{
    content:"";
    display: block;
    border-bottom: 4px solid #D74135;
    width:96px;
    height:16px;
    margin:auto;
}
h4{
    background-color: #FFF;
    border-left:8px solid #D74135;
    font-size:18px;
    font-weight: 700;
    padding:15px 0 14px 32px;
    text-align: left;
}
section{
    margin-bottom:100px;
    width:100%;
}
section.bg-gray{
    background-color: #EAEAEA;
    padding:130px 0 120px;
    color:#000;
}
.sp_only{
  display: none;
}
.note{
  font-size:14px;
  position:relative;
  padding-left:16px;
}
.note span{
  font-size:14px;
  position:absolute;
  left:-1px;
}
.l-header{
  display:block;
  min-height: 100%;
  min-height: 100vh;
  min-width: 100%;
  min-width:100vw;
  overflow: hidden;
  position: relative;
}
.l-header p{
  position:absolute;
  bottom:0;
  color:#D74135;
  font-size:26px;
  text-align:center;
  z-index:5;
}
.head_material li{
  width:100%!important;
  max-width:100%!important;
}
.head_material li img{
  width:100%!important;
  object-fit: cover;
  max-width:100%!important;
  min-width: 100vw;
  min-height:100vh;
}
.nav{
  border-bottom:1px solid #EAEAEA;
  background:#FFF;
  display: flex;
  justify-content:space-between;
  padding:0 16px 0;
}
.btn-contact{
    background-color: #D74135;
    border-radius: 100px;
    color: #FFF;
    font-size:16px;
    font-weight: 700;
    line-height:48px;
    height: 48px;
    margin-top: 16px;
    text-align: center;    
    text-decoration: none;
    transition: all .2s;
    width: 232px;
}
.btn-contact:hover{
  opacity:.6;
}
.content_wrapp{
  margin:auto;
  text-align: center;
  width:960px;
}
.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  margin-bottom:150px!important;
  z-index: 1;
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height:100%;
  border:none;
  box-shadow:0 0 0 1px #eaeaea;
  z-index: 1;
}

@media only print, screen and (max-width: 767px) {
  h1{
    top:calc(80 / 375 * 100vw);
  }
  h2{
    font-size:calc(25 / 375 * 100vw);
    margin-bottom:calc(10 / 375 * 100vw);
  }
  h2 + p{
      font-size:calc(18 / 375 * 100vw);
      font-weight: 700;
  }
  h3{
      font-size: calc(30 / 375 * 100vw);
      margin-bottom:calc(40 / 375 * 100vw);
  }
  h3:after{
      width:calc(70 / 375 * 100vw);
      height:calc(20 / 375 * 100vw);
  }
  h4{
      background-color: #FFF;
      border-left:8px solid #D74135;
      font-size:18px;
      font-weight: 700;
      padding:15px 0 14px 32px;
      text-align: left;
  }
  section{
      margin-bottom:calc(50 / 375 * 100vw);
      width:100%;
  }
  section.bg-gray{
      padding:calc(80 / 375 * 100vw) 0;
      color:#000;
  }
  .sp_only{
    display: block;
  }
  
 .nav{
    padding:0 3%;
  }
  .btn-contact{
    font-size:calc(16 / 375 * 100vw);
    width:calc(160 / 375 * 100vw);
  }
  .content_wrapp{
    width:100%;
    padding:0 5%;
  }
  .youtube {
    margin-bottom:calc(100 / 375 * 100vw)!important;
  }
}

.txt-catch img{
  margin: 20px 0 40px;
}
.txt-catch p{
    font-size:26px;
    font-weight: 700;
    margin-bottom:88px;
}
.txt-percentage p:first-child{
    font-size:16px;
    font-weight: 700;
    margin-bottom:0;
}
.txt-percentage small{
    display: block;
    color:#949494;
    font-size:14px;
    margin-bottom:48px;
}
.txt-percentage p{
    font-size:16px;
    line-height: 2;
    margin-bottom:40px;
}
.txt-percentage img{
  margin:50px 0 44px;
}
@media only print, screen and (max-width: 767px) {
  .txt-catch img{
      margin: 0;
  }
  .txt-catch p{
      font-size:calc(20 / 375 * 100vw);
      margin:calc(20 / 375 * 100vw) 0 calc(60 / 768 * 100vw);;
  }

  .txt-percentage p:first-child{
      font-size:calc(16 / 375 * 100vw);
      font-weight: 300;
  }
  .txt-percentage small{
      display: block;
      color:#949494;
      font-size:calc(14 / 375 * 100vw);
      margin-bottom:calc(48 / 375 * 100vw);
  }
  .txt-percentage p{
      font-size:calc(16 / 375 * 100vw);;
      line-height: 1.8;
      margin-bottom:calc(45 / 375 * 100vw);
  }
  .txt-percentage img{
    margin:calc(50 / 375 * 100vw) 0 calc(44 / 375 * 100vw);
  }
}

.information{
    display: flex;
    margin-top:60px;    
}
.information .column3-box{
    border:1px solid #D74135;
    border-radius: 16px;
    width:304px;
}
.information .column3-box + .column3-box{
    margin-left: 24px;
}
.information .column3-box p:first-child{
    background-color: #D74135;
    border-radius: 14px 14px 0 0;
    color:#FFF;
    font-size:20px;
    font-weight: bold;
    height:56px;
    line-height: 56px;
}
.information .column3-box p + p{
    font-size:16px;
    text-align: left;
    line-height: 1.8;
    padding:28px 24px;
}
.information + a{
    background-color: #D74135;
    color:#FFF;
    display: block;
    font-size:22px;
    font-weight: 700;
    margin: 80px auto 100px;
    line-height: 86px;
    height:86px;
    width:430px;
    border: 2px solid #FFF;
    border-radius: 100px;
    z-index: 2;
    box-shadow: 0px 0px 0px 10px #D74135;
    transition:all .3s;
}
.information + a:hover{
  opacity:.6;
}
@media only print, screen and (max-width: 767px) {
  .information{
      display: block;
      margin-top:calc(30 / 375 * 100vw);
      padding:0 5%;    
  }
  .information .column3-box{
      border:1px solid #D74135;
      margin-top: calc(20 / 375 * 100vw);
      width:100%;
  }
  .information .column3-box + .column3-box{
      margin-left: 0;
  }
  .information + a{
      font-size:calc(14 / 375 * 100vw);
      margin: calc(64 / 375 * 100vw) auto calc(60 / 375 * 100vw);
      line-height: calc(68 / 375 * 100vw);
      height:calc(68 / 375 * 100vw);
      width:85%;
      box-shadow: 0px 0px 0px calc(8 / 375 * 100vw) #D74135;
  }
}

.productinfo-lead{
  color:#D74135;
  font-size:20px;
  font-weight: 700;
  margin-bottom:50px;
}
.productinfo{
  display: flex;
}
.productinfo .column2-box {
  width:440px;
  text-align: left;
}
.productinfo .column2-box + .column2-box{
  margin-left:80px;
}
.productinfo .column2-box img{
  border:1px solid #D74135;
}
.productinfo .column2-box .settitle{
  font-size:26px;
}
.productinfo .column2-box .setprice{
  color:#D74135;
  font-size:14px;
}
.productinfo .column2-box .setprice span:after{
  content:"円";
  font-size:30px;
}
.productinfo .column2-box .setprice span{
  font-size:50px;
  margin-right:10px;
}
.productinfo .column2-box ul{
  list-style-type:none;
  margin-top:10px;
}
.productinfo .column2-box ul li{
  position: relative;
}
.productinfo .column2-box ul li + li{
  margin-top:6px;
}
.productinfo .column2-box ul li:before{
  content:"●";
  color:#9FA0A0;
  font-size:16px;
  margin-right:4px;
}

.productinfo-note ul{
  background-color: #FFF;
  border-radius: 8px;
  border:1px solid #D74135;
  margin-top:40px;
  display: flex;
  list-style-type:none;
  justify-content: center;
  padding: 25px 0;
}
.productinfo-note ul li:before{
  content:"●";
  color:#D74135;
  font-size:20px;
  margin-right:4px;
}
.productinfo-note ul li + li{
  margin-left: 40px;
}
.productinfo-note .note-wrap{
  margin-top:25px;
  line-height:1.8;
}

.productinfo-note .note{
  font-size:14px;
  text-align:left;
}

.productinfo-note picture{
  display: block;
  margin-top:40px;
}

@media only print, screen and (max-width: 767px) {
  .productinfo-lea{
    font-size:calc(20 / 375 * 100vw);
    margin-bottom:calc(40 / 375 * 100vw);}
  .productinfo{
    display: block;
  }
  .productinfo .column2-box {
    width: 100%;
    text-align: left;
  }
  .productinfo .column2-box + .column2-box{
      margin-left:0px;
  }
  .productinfo .column2-box .settitle{
    font-size:calc(26 / 375 * 100vw);
    margin-top:calc(20 / 375 * 100vw);
  }
  .productinfo .column2-box .setprice{
    font-size:calc(14 / 375 * 100vw);
  }
  .productinfo .column2-box .setprice span:after{
    font-size:calc(30 / 375 * 100vw);
  }
  .productinfo .column2-box .setprice span{
    display:block;
    font-size:calc(50 / 375 * 100vw);
    margin-right:0px;
  }
  .productinfo .column2-box ul{
    margin-top:calc(24 / 375 * 100vw);
    margin-bottom:calc(38 / 375 * 100vw);
  }
  .productinfo .column2-box ul li{
    font-size:calc(18 / 375 * 100vw);    
  }
  .productinfo .column2-box ul li + li{
    margin-top:calc(8 / 375 * 100vw);
  }
  .productinfo .column2-box ul li:before{
    font-size:calc(18 / 375 * 100vw);
    margin-right:calc(4 / 375 * 100vw);
  }
  .productinfo-note ul{
    display: block;
    list-style-type:none;
    text-align: left;margin-top:0;
    padding: calc(20 / 375 * 100vw);
  }
  .productinfo-note ul li:before{
    font-size:calc(16 / 375 * 100vw);
    margin-right:calc(6 / 375 * 100vw);
  }
  .productinfo-note ul li + li{
    margin-left: 0px;
  }
  .productinfo-note .note-wrap{
    margin-top:calc(20 / 375 * 100vw);
    line-height:1.8;
  }
  
  .productinfo-note .note{
    margin-bottom:calc(10 / 375 * 100vw);
  }
  
  .productinfo-note picture{
    display: block;
    margin-top:calc(30 / 375 * 100vw);
  }
  .productinfo-note picture img{
    width:100%;
  }
}

.order-wrapp{
  position: relative;
}
.order-wrapp + .order-wrapp{
  margin-top:24px;
}
.order-wrapp + .order-wrapp:before{
  content:"";
  border-style: solid;
  border-width: 24px 33px 0 33px;
  border-color: #EAEAEA transparent transparent transparent;
  display: inline-block;
  margin-bottom:14px;
  width:56px;
}

.order-title{
  background-color: #D74135;
  border-radius: 16px;
  color:#FFF;
  font-weight: 700;
  height:96px;
  position: absolute;
  padding:18px;
  width:272px;
  left: -25%;
  text-align:center;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}

.order-detail{
  border:1px solid #D74135;
  border-radius: 16px;
  font-size: 16px;
  line-height: 2;
  padding:32px;
  width: 80%;
  margin: 0 0 0 auto;
  position: relative;
  text-align:left;
  padding-left:13%;
  min-height:160px;
}

.order-detail a{
  display:block;
  width:224px;
  height:48px;
  background-color:#D74135;
  color:#FFF;
  line-height:48px;
  font-size:16px;
  border-radius:100px;
  text-align:center;
  margin-top:26px;
  transition:all .3s;
}
.order-detail a:hover{
  opacity:.6;
}

.order-detail .adress{
  margin-top:10px;
  line-height: 1.4;
}
.orderinfo-wrapp{
  background-color: #EAEAEA;
  border-radius: 16px;
  padding: 40px 40px 10px;
  text-align: left;
  line-height:2;
}

.orderinfo-wrapp .text-box{
  padding: 24px 5%;
}
.orderinfo-wrapp ul{
  list-style-type: none;
  padding:0;
  margin: 0;
}
.orderinfo-wrapp ul li{
  position:relative;
  padding-left:18px;
}
.orderinfo-wrapp ul li:before{
  position:absolute;
  content:"●";
  font-size: 16px;
  top:0;
  left:0px;
}

@media only print, screen and (max-width: 767px) {
  .order-wrapp + .order-wrapp{
    margin-top:calc(20 / 375 * 100vw);
  }
  .order-wrapp + .order-wrapp:before{
    content:"";
    border-style: solid;
    margin-bottom: calc(66 / 375 * 100vw);
  }
  .order-title{
    font-size:calc(20 / 375 * 100vw);
    height:calc(96 / 375 * 100vw);
    line-height:1.6;
    padding:calc(16 / 375 * 100vw) 0;
    width:calc(295 / 375 * 100vw);
    left:0;
    right:0;
    margin:auto;
    top: -20%;
    transform: translateY(0%);
    -webkit-transform: translateY(0%);
    -ms-transform: translateY(0%);
  }
  h3 + .order-wrapp{
    margin-top:calc(75 / 375 * 100vw);
  }
  .order-detail{
    font-size: calc(16 / 375 * 100vw);
    padding-top:calc(78 / 375 * 100vw);
    width: 100%;
    min-height:calc(234 / 375 * 100vw);
    padding: calc(70 / 375 * 100vw) calc(20 / 375 * 100vw) 5%;
  }
  .order-detail a{
    display:block;
    width:calc(224 / 375 * 100vw);
    height:calc(48 / 375 * 100vw);
    background-color:#D74135;
    color:#FFF;
    line-height:calc(48 / 375 * 100vw);
    font-size:calc(16 / 375 * 100vw);
    margin:calc(26 / 375 * 100vw) auto 0;
  }
  .order-detail .adress{
    margin-top:calc(20 / 375 * 100vw);
    font-size:calc(14 / 375 * 100vw);
  }
  .orderinfo-wrapp{
      padding: calc(20 / 375 * 100vw) calc(20 / 375 * 100vw) calc(10 / 375 * 100vw);
  }
  .orderinfo-wrapp .text-box{
    padding: calc(24 / 375 * 100vw) 0;
  }
  .orderinfo-wrapp ul li{
    position:relative;
    padding-left:calc(20 / 375 * 100vw)
  }
  .orderinfo-wrapp ul li:before{
    position:absolute;
    content:"●";
    font-size: calc(16 / 375 * 100vw);
    top:calc(-1 / 375 * 100vw);
    left:0px;
  }
}

.contact-info{
  font-size:20px;
  line-height: 1.8;
}

.contact-wrapp{
  display: flex;
}
.contact-wrapp .column3-box{
  position: relative;
  margin-top:64px;
}
.contact-wrapp .column3-box a:link,
.contact-wrapp .column3-box a:visited{
  color:#000;
}
.contact-wrapp .column3-box + .column3-box{
  margin-left: 24px;
}

.contact-wrapp .column3-box p:first-child{
  position: absolute;
  background-color:#D74135;
  border-radius:100px;
  color:#FFF;
  font-size:20px;
  font-weight: 700;
  width:144px;
  height:48px;
  line-height: 48px;
  top:-20px;
  left:0;
  right:0;
  margin:auto;
}
.contact-wrapp .column3-box p + p{
  background-color:#FFF;
  border-radius: 16px;
  font-size:20px;
  font-weight: 700;
  height: 128px;
  line-height:140px;
  width:304px;
}

.contact-wrapp .column3-box .mail-text{
  font-size: 16px;
}

@media only print, screen and (max-width: 767px) {
  .contact-info{
    font-size:calc(20 / 375 * 100vw);
  }
  .contact-wrapp{
    display: block;
  }
  .contact-wrapp .column3-box{
    position: relative;
    margin-top:calc(40 / 375 * 100vw);
  }
  .contact-wrapp .column3-box + .column3-box{
    margin-left: 0px;
  }
  .contact-wrapp .column3-box p:first-child{
    position: absolute;
    background-color:#D74135;
    font-size:calc(20 / 375 * 100vw);
    width:calc(144 / 375 * 100vw);
    height:calc(48 / 375 * 100vw);
    line-height:calc(48 / 375 * 100vw);;
    top:-calc(20 / 375 * 100vw);
    left:0;
    right:0;
    margin:auto;
  }
  .contact-wrapp .column3-box p + p{
    background-color:#FFF;
    border-radius: calc(16 / 375 * 100vw);
    font-size:calc(20 / 375 * 100vw);
    font-weight: 700;
    height: calc(128 / 375 * 100vw);
    line-height:calc(128 / 375 * 100vw);
    width:100%;
  }

  .contact-wrapp .column3-box .mail-text{
    font-size:calc(16 / 375 * 100vw);
  }
}

.l-footer{
  background-color: #D74135;
  color:#FFF;
  background-image: url("../images/img_bg_foot.png");
  background-repeat:no-repeat;
  background-position: right 26% bottom 45%;
}

.l-footer .content_wrapp{
  text-align: left;
}
.l-footer img{
  margin: 54px 0;
}
.l-footer .name{
  font-size:22px;
  font-weight:700;
  margin-bottom:32px;
}
.l-footer .name span{
  font-weight:300;
}
.l-footer .name+p{
  line-height:2.1;
}
.l-footer p b{
  display:inline-block;
  width: 150px;
}
.l-footer ul{
  list-style-type:none;
  margin-top: 40px;
  margin-bottom:60px;
  padding:0;
}
.l-footer ul li{
  position:relative;
  margin-left:18px;  
}
.l-footer ul li + li{
  margin-top:10px;
}
.l-footer ul li:before{
  content:"●";
  font-size:10px;
  top:4px;
  position:absolute;
  margin-left:-15px;
}
.copyright{
  background-color:#363636;
  font-size:16px;

  padding:28px 0
}
.copyright small{
  width:960px;
  margin:auto;
  font-size: 16px;
}
@media only print, screen and (max-width: 767px) {
  .l-footer{
    background-image:none;
    background-repeat:no-repeat;
  }
  .l-footer .content_wrapp{
    text-align: left;
    padding:0 5%;
  }
  .l-footer img{
    margin: calc(54 / 375 * 100vw) 0 calc(70 / 375 * 100vw);;
  }

  .l-footer .name{
    font-size:calc(22 / 375 * 100vw);
  }
  .l-footer .name span{
    display:block;
    font-size:calc(18 / 375 * 100vw);
  }
  .l-footer p b{
    font-size:calc(16 / 375 * 100vw);
    line-height:2.1;
    display:block;
  }
  .l-footer p + p{
    margin-top:calc(20 / 375 * 100vw);
  }
  .l-footer ul{
    list-style-type:none;
    margin:calc(40 / 375 * 100vw) 0;
    padding:0;
  }
  .l-footer ul li{
    position:relative;
    margin-left:calc(18 / 375 * 100vw);
  }
  .l-footer ul li + li{
    margin-top:calc(10 / 375 * 100vw);
  }
  .l-footer ul li:before{
    content:"●";
    font-size:calc(4 / 375 * 100vw);
    top:calc(4 / 375 * 100vw);
    position:absolute;
    margin-left:-calc(15 / 375 * 100vw);;
  }
  .copyright{
    font-size:calc(16 / 375 * 100vw);
    padding:calc(28 / 375 * 100vw) 0:
  }
  .copyright small{
    width:100%;
    padding:0 5%;
    font-size: calc(16 / 375 * 100vw);
  }
}

/**************************
  style js
**************************/
/* hero slider */
.head_material {
  position: relative;
}
.head_material > li {
  position: absolute;
  list-style: none;
  visibility: hidden;
  animation: anime_head_material 12s 0s infinite;
}
.head_material > li:nth-of-type(2) {
  animation-delay: 4s;
}
.head_material > li:nth-of-type(3) {
  animation-delay: 8s;
}

@keyframes anime_head_material {
  0% {
      visibility: visible;
      opacity: 0;
  }
  15% {
      opacity: 1;
  }
  33.3% {
      opacity: 1;
  }
  48.3% {
      opacity: 0;
  }
  100% {
      opacity: 0;
  }
}

/* hero scrollui */
.scrolldown1{
  position:absolute;
  left:50%;
  bottom:10px;
  height:50px;
}
.scrolldown1 span{
  position: absolute;
  left:-30px;
  top: -50px;
  color: #D74135;
  font-size: 26px;
  letter-spacing: 0.05em;
}
.scrolldown1::after{
  content: "";
  position: absolute;
  top: 0;
  width: 1px;
  height: 80px;
  background: #D74135;
  animation: pathmove 1.8s ease-in-out infinite;
  opacity:0;
}
@keyframes pathmove{
  0%{
    height:0;
    top:0;
    opacity: 0;
  }
  30%{
    height:80px;
    opacity: 1;
  }
  100%{
    height:0;
    top:80px;
    opacity: 0;
  }
}
.fixed {
  position: sticky;/*固定する*/
  position: -webkit-sticky;
      top: 0;
    padding: 0;
    width: 100%;
    z-index: 100%;
}
#globalNavi{
  z-index:9999;
}