@charset "UTF-8";
/*** The new CSS reset - version 1.5.1 (last updated 1.3.2022) ***/
*:where(:not(iframe, canvas, img, svg, video):not(svg *, symbol *)) {
  all: unset;
  display: revert;
}

*, *::before, *::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html {
  /* scroll-behavior: smooth; */
}

a, button {
  cursor: revert;
}

ol, ul, menu {
  list-style: none;
}

img {
  max-width: 100%;
}

table {
  border-collapse: collapse;
}

textarea {
  white-space: revert;
}

meter {
  -webkit-appearance: revert;
  -moz-appearance: revert;
       appearance: revert;
}

::-webkit-input-placeholder {
  color: unset;
}

::-moz-placeholder {
  color: unset;
}

:-ms-input-placeholder {
  color: unset;
}

::-ms-input-placeholder {
  color: unset;
}

::placeholder {
  color: unset;
}

:where([hidden]) {
  display: none;
}

:where([contenteditable]) {
  -moz-user-modify: read-write;
  -webkit-user-modify: read-write;
  overflow-wrap: break-word;
  -webkit-line-break: after-white-space;
}

:where([draggable=true]) {
  -webkit-user-drag: element;
}

body {
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  color: #585858;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  -webkit-font-feature-settings: "palt";
          font-feature-settings: "palt";
  letter-spacing: 0.1rem;
}

body p {
  line-height: 2;
}

header{
  background: #fff;
}


.back {
  border-radius: 20em;
  border: 2px solid #a0a0a0;
  color: #656565;
}


.back::after {
  content: "";
  width: 12px;
  height: 12px;
  position: absolute;
  border-top: 2px solid #656565;
  border-right: 2px solid #656565;
  -webkit-transform: rotate(225deg);
  transform: rotate(225deg);
  background-size: contain;
  left: 15px;
  top: 0;
  bottom: 0;
  margin: auto;
}
.pc {
  display: none !important;
}


#sec04 >  div.relative{
  position: relative;
}



#contact img.ctrbtn01{
  position: absolute;
  max-width: 60%;
  top: 14%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#contact img.ctrbtn02{
  position: absolute;
  max-width: 60%;
  top: 28.1%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#contact img.ctrbtn03{
  position: absolute;
  max-width: 60%;
  top: 45.4%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#contact img.ctrbtn04{
  position: absolute;
  max-width: 60%;
  top: 58.9%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#contact img.ctrbtn05{
  position: absolute;
  max-width: 60%;
  top: 72.5%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#contact img.ctrbtn06{
  position: absolute;
  max-width: 60%;
  top: 85.6%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#contact img.ctrbtn07{
  position: absolute;
  max-width: 60%;
  top: 98.7%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#mainvisual{
  background: #fff;
  background-size: cover;
  background-position:center ;
}

#mainvisual > div{
  width: 100%;
  /* max-width: 800px; */
  width: 100%;
  margin-inline: auto;
}

#mainvisual img{
  width: 100%;
}
.main_bottom{
  /* margin-top: 50px; */
  width: 100%;
  margin-inline: auto;
}
#sec01{
  width: 100%;
  margin-inline: auto;
  
}
#sec01 > div{
  /* padding-block:50px ; */
  width: 100%;
  
}
#sec01 > div img{
  display: block;
  /* max-width: 800px; */
  width: 100%;
  margin-inline: auto;
  
}
.triangle{
  position: absolute;
  border-top: 20px solid #fff;
  border-right: 60px solid transparent;
  border-left: 60px solid transparent;
  
  left: 50%;
  transform: translate(-50%, -50%);
}

#sec02{
  /* padding-bottom:100px; */
  background: #fdefe3;
}

#sec02 > div img{
  width: 100%;
  /* max-width: 400px; */
  display: block;
  margin-inline: auto;
}


#sec03 > div{
  width: 100%;
  margin-inline: auto;
  padding-top: 50px;
  /* max-width: 1200px; */
}
#sec03 > div img{
  /* max-width: 500px; */
  width: 100%;
  display: block;
  margin-inline: auto;
}



#sec04 > div{
  width: 100%;
  margin-inline: auto;
  /* max-width: 1200px; */
}
#sec04 > div img{
  /* max-width: 500px; */
  width: 100%;
  display: block;
  margin-inline: auto;
}
#sec05{
  background: #fff;
  padding: 20px 0 50px;
}
#sec05 > div{
  /* background: rgba(255 255 255 / 90%); */
  width: 100%;
  margin-inline: auto;
  /* padding-block: 50px; */
}
#sec05 > div img{
  /* max-width: 500px; */
  width: 100%;
  display: block;
  margin-inline: auto;
  /* margin-bottom: 50px; */
}

h1#logo img{
  max-width: 140px;
  margin-block: 20px;
  margin-left: 15px;
}

/* 700px以上 */
@media screen and (min-width: 700px) {
  .sp {
    display: none !important;
  }
  .pc {
    display: block !important;
  }
  h1#logo img{
    /* max-width: 300px; */
    
    margin-block: 20px;
  }
  .main_bottom{
    max-width: 100%;
  }

  #contact img.ctrbtn01{
    position: absolute;
    width: 50%;
    max-width: 500px;
    top: 15%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  #contact img.ctrbtn02{
    position: absolute;
    width: 50%;
    max-width: 500px;
    top: 28.9%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  #contact  img.ctrbtn03{
    position: absolute;
    width: 50%;
    max-width: 500px;
    top: 42.9%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  #contact img.ctrbtn04{
    position: absolute;
    width: 50%;
    max-width: 500px;
    top: 56.9%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  #contact img.ctrbtn05{
    position: absolute;
    width: 50%;
    max-width: 500px;
    top: 70.9%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  #contact img.ctrbtn06{
    position: absolute;
    width: 50%;
    max-width: 500px;
    top: 84.9%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  #contact img.ctrbtn07{
    position: absolute;
    width: 50%;
    max-width: 500px;
    top: 98.9%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .triangle{
    position: absolute;
    border-top: 50px solid #fff;
    border-right: 100px solid transparent;
    border-left: 100px solid transparent;
    
    left: 50%;
    transform: translate(-50%, -50%);
  }
}



/* maincontents */
h1#logo img.sp {
  max-width: 200px;
  width: 100%;
  margin: 20px auto 20px;
  display: block;
}

/* menu */


/* メニューのデザイン*/
.nav_content {
  width: 100%;
  height: 100%;
  position: fixed;
  bottom: 100%;
  left: 0%;
  /* メニューを画面の外に飛ばす */
  z-index: 99;
  background: #fff;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  text-align: center;
  padding-top: 25px;
}

.nav_list {
  list-style: none;
}

.nav_item a {
  color: #fff;
  text-decoration: none;
}


@media screen and (min-width: 700px) {
  p.disc{
    text-align: center;
    font-size: 12px;
  }
  header{
    margin-inline: auto;
    padding:0;
    width: 100%;
    background: #fff;
    z-index: 2;
    top: 0;
    position: fixed;
  }
  header div.flexbox{
    display: flex;
    margin-left:2% ;
    
  }

  p#discription {
    background: #82b383;
    color: #fff;
    text-align: center;
    padding: 8px 0;
    font-size: 14px;
    padding-left: 30%;
  }

  .nav_content {
    position: unset;
    margin: 0 auto;
    padding-right: 1%;
    padding-left: 1%;
    padding-top: 25px;
  }

  .nav_content ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: end;
    max-width: 100%;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    margin: 0 0 0 auto;
    /* row-gap: 10px; */
  }

  .nav_content a {
    color: #0a0a0a;
    border-right: 1px solid;
    padding: 0 10px;
    font-size: 15px;
    letter-spacing: 0.13em;
    font-weight: bold;
    letter-spacing: 0.8px;
  }

  .nav_content li:last-child a {
    border-right: none;
  }

}
@media screen and (min-width: 980px) {
  .nav_content ul {
    max-width: 100%;

  }

}
@media screen and (min-width: 1000px) {
  p#discription {
    padding-left: 0;
    text-align: center;
  }
}
/* 1200px以上 */
@media screen and (min-width: 1200px) {
  p#discription {
    text-align: center;
    font-size: 16px;
  }
  h1#logo img{

    margin-block: 0px;
  }

  h1#logo {
    width: auto;
    max-width: 300px;
    margin-block: 20px;
  }
}
@media screen and (min-width: 1300px) {
  .nav_content {
    padding-right: 0;
    padding-left: 0;
  }

  .nav_content ul {
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: end;
  }
}




/* 940px以上 */
@media screen and (min-width: 940px) {
  .nav_content {
    padding-top: 25px;
  }
}



@media screen and (max-width: 710px) {
  #mainvisual{
    padding-top: 100px;
  }
  header {
    position: fixed;
    /* background: #fff; */
    width: 100%;
    z-index: 100;
  }

  header div.flexbox{
    display: flex;
  }  
  .nav_content {
    position: unset;
    margin: 0 auto;
    padding-right: 1%;
    padding-left: 1%;
    padding-top: 25px;
  }

  .nav_content ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: end;
    max-width: 100%;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    margin: 0 0 0 auto;
    /* row-gap: 10px; */
  }

  .nav_content a {
    color: #0a0a0a;
    border-right: 1px solid;
    padding: 0 5px;
    font-size: 13px;
    letter-spacing: 0.15em;
    font-weight: bold;
    letter-spacing: 1px;
  }
  .nav_content li:last-child a {
    border-right: none;
  }



}

@media screen and (min-width: 700px) {
  #mainvisual{
    padding-top: 100px;
  }
  #mainvisual img{
    /* max-width: 450px; */
    /* display: block;
    margin-inline: auto; */
  }
  #sec01 > div{
    max-width: 1200px;
    margin: auto;
    padding-top: 100px;
  }
  #sec01 > div img.pc{
    /* max-width: 800px; */
    width: 100%;
  }
  #sec02{
    background: url(../img/sec02_.png);
    background-size: cover;
    padding-bottom: 150px;
  }
  #sec02 > div{
    max-width: 1100px;
    margin: auto;
    /* padding-bottom: 100px; */
  }
  #sec02 > div img.pc{
    padding-top: 100px;
    width: 96%;
    /* max-width: 750px; */
  }
  #sec03 > div img.pc{
    max-width: 1200px;
    width: 100%;
    /* margin-bottom: 30px; */
  }

  #sec04{
    background: url(../img/sec04_.png);
    background-size: cover;
    padding-bottom: 100px;
  }
  #sec04 > div img.pc{
    padding-top: 100px;
    max-width: 900px;
    width: 90%;
  }

  #sec05{
    /* padding-block: 100px; */
  }
  #sec05 > div{
    padding-block: 80px;
  }
  #sec05 > div img.pc{
    max-width: 1200px;
    width: 100%;

  }

  #sec06 > div img.pc{
    /* max-width: 700px!important; */
    padding-block: 60px 0;
    width: 96%;
  }

  #contact a{
    margin-bottom: 0;
  }

}
@media screen and (max-width: 600px) {
  #mainvisual{
    padding-top: 100px;
  }
  h1#logo img{
    max-width: 100px;
    margin-left: 15px;
    /* margin-block: 15px; */
  }


  .nav_content a {
    color: #0a0a0a;
    border-right: 1px solid;
    padding: 0 5px;
    font-size: 11px;
    letter-spacing: 0.15em;
    font-weight: bold;
    letter-spacing: 1px;
  }
  .nav_content li:last-child a {
    border-right: none;
  }

}

/* footer */
footer {
  background: #313131;
  padding: 30px 0 0;
}
footer .f_nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  grid-gap: 10px;
  margin-bottom: 10px;
}


footer img {
  display: block;
  width: 90%;
  max-width: 200px;
  margin: 0 auto 16px;
}
footer .f_nav a {
  color: #fff;
  border-right: 1px solid #fff;
  padding: 0 10px;
  font-size: 12px;
  letter-spacing: 0.15em;
  font-weight: bold;
  letter-spacing: 1px;
}
footer .f_nav li:last-child a {
  border-right: none;
}


footer ul.info {
  margin: 40px 0 0px;
  text-align: center;
  padding: 10px 0;
}
footer ul.info li {
  font-size: 15px;
}


@media screen and (min-width: 700px) {
  footer .f_nav a {
    color: #fff;
    border-right: 1px solid #fff;
    padding: 0 10px;
    font-size: 15px;
    letter-spacing: 0.15em;
    font-weight: bold;
    letter-spacing: 1px;
  }
  footer > img {
    margin: 70px auto;
  }
}