/*body,*/
div,
p,i,span,
input,select,
button,
h1,h2,h3,h4,h5,h6
{
  margin:0;
  padding:0;
  font-family:"Noto Sans JP";
}
a{
  margin:0;
  padding:0;
  text-decoration:none;
  font-family:"Noto Sans JP";
}
ul,
li{
  margin:0;
  padding:0;
  list-style-type:none;
}
body{
  max-width:1024px;
  margin:0 auto;
  padding:0;
  padding-top:90px;
  font-family:"Noto Sans JP";
}
/*微妙そう？*/
/*
header ~ section,
header ~ div{
  max-width:1024px;
  margin:auto;
}*/
.pageTitleWrapper{
  width:100%;
  margin-top:20px;
  margin-bottom:20px;
  border-bottom:solid 2px #707070;
  color:#707070;
}
.withoutEnds{
  width:95%;
  margin:20px auto 0;
}
.green{
  border-bottom:solid 2px #639A61;
  color:#639A61;
}
.pageTitleWrapper h1{
  margin-left:2.5%;
  padding-bottom:5px;
  font-size:18px;
  font-weight:normal;
}
.withoutEnds h1{
  margin-left:2.5%;
  font-size:20px;
  font-weight:normal;
}

.sectionNameWrapper{
  width:100%;
  padding:5px 0;
  font-size:24px;
  border-top:solid 2px #ACA9A2;
  border-bottom:solid 2px #ACA9A2;
  background-color:#E6E0D0;
}

.sectionNameWrapper h2{
  margin-left:10px;
  font-size:16px;
  font-weight:normal;
}

.blackBorderButton{
  height:40px;
  width:120px;
  color:#000;
  background-color:#FFF;
  border:solid 1px #000;
  border-radius:7px;
}
.blackButton{
  height:40px;
  width:120px;
  color:#FFF;
  background-color:#000;
  border:solid 1px #000;
  border-radius:7px;
}
.orangeButton{
  height:40px;
  width:160px;
  color:#FFF;
  background: -moz-linear-gradient(top, #F29700, #EA341C);
  background: -webkit-linear-gradient(top, #F29700, #EA341C);
  background:linear-gradient(to bottom, #F29700, #EA341C);
  border:none;
}
.greenBorderButton{
  height:40px;
  width:120px;
  color:#5AA061;
  background-color:#FFF;
  border:solid 1px #5AA061;
  border-radius:7px;
}
.greenButton{
  height:40px;
  width:120px;
  color:#FFF;
  background-color:#5AA061;
  border:solid 1px #5AA061;
}
.arrow{
  position: relative;
  display: inline-block;
  padding: 0 0 0 16px;
  color: #000;
  vertical-align: middle;
  text-decoration: none;
  font-size: 15px;
}
.arrow::before,
.arrow::after{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  content: "";
  vertical-align: middle;
}
.buttonArrowWhite::before{
  left: 3px;
  width: 26px;
  height: 20px;
  border-right: 4px solid #FFF;
  -webkit-transform: rotate(35deg);
  transform: rotate(35deg);
}
.buttonArrowWhite::after{
  left: 3px;
  width: 26px;
  height: 20px;
  border-right: 4px solid #FFF;
  -webkit-transform: rotate(-35deg);
  transform: rotate(-35deg);
}
.buttonArrowBlack::before{
  left: 3px;
  width: 14px;
  height: 14px;
  border-top: 2px solid #585657;
  border-right: 2px solid #585657;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.buttonSharpArrow{
  top:-2px;
  left:-7px;
}
.buttonSharpArrow::before{
  width: 8px;
  height: 8px;
  /*border-top: 2px solid #624C3E;
  border-right: 2px solid #624C3E;*/
  border-top: 2px solid #FFF;
  border-right: 2px solid #FFF;
  -webkit-transform: rotate(45deg) skew(calc((90deg - 120deg) / 2), calc((90deg - 120deg) / 2));
  transform: rotate(45deg) skew(calc((90deg - 120deg) / 2), calc((90deg - 120deg) / 2));
}
.arrowWrapper{
  text-align:right;
  display:inline-block;
}
.slideshowArrowWrapperLeft{
  position:relative;
  top:-50%;
  right:10px;
  height:80px;
  width:20px;
  margin-bottom:-80px;
  margin-right:-20px;
  display:inline-block;
  vertical-align:bottom;
  background-color:rgba(0, 0, 0, 0.4);
  transition: background-color 0.3s;
  transform: translateY(calc(-150% - 40px));
    -webkit-transform: translateY(calc(-150% - 40px));
    -ms-transform: translateY(calc(-150% - 40px));
  z-index:2;
}
.slideshowArrowWrapperRight{
  position:relative;
  top:-50%;
  left:-10px;
  height:80px;
  width:20px;
  margin-bottom:-80px;
  margin-right:-20px;
  display:inline-block;
  background-color:rgba(0, 0, 0, 0.4);
  transition: background-color 0.3s;
  transform: translateY(calc(-150% - 40px));
    -webkit-transform: translateY(calc(-150% - 40px));
    -ms-transform: translateY(calc(-150% - 40px));
  z-index:2;
}
.tileSlideshowArrowWrapperLeft{
  position:relative;
  top:40px;
  right:10px;
  height:80px;
  width:20px;
  margin-right:-20px;
  margin-bottom:-80px;
  display:inline-block;
  vertical-align:bottom;
  background-color:rgba(0, 0, 0, 0.4);
  transition: background-color 0.3s;
  transform: translateY(calc(-150% - 40px));
    -webkit-transform: translateY(calc(-150% - 40px));
    -ms-transform: translateY(calc(-150% - 40px));
  z-index:2;
}
.tileSlideshowArrowWrapperRight{
  position:relative;
  top:40px;
  left:-10px;
  height:80px;
  width:20px;
  margin-right:-20px;
  margin-bottom:-80px;
  display:inline-block;
  background-color:rgba(0, 0, 0, 0.4);
  transition: background-color 0.3s;
  transform: translateY(calc(-150% - 40px));
    -webkit-transform: translateY(calc(-150% - 40px));
    -ms-transform: translateY(calc(-150% - 40px));
  z-index:2;
}
.tileSlideshowArrowWrapperTop{
  position:relative;
  top:0;
  left:calc(70% / 2);
  height:25px;
  width:30%;
  margin-right:-20px;
  margin-bottom:-80px;
  display:inline-block;
  vertical-align:bottom;
  background-color:rgba(0, 0, 0, 0.4);
  transition: background-color 0.3s;
  transform: translateY(calc(-150% - 40px));
    -webkit-transform: translateY(calc(-150% - 40px));
    -ms-transform: translateY(calc(-150% - 40px));
  z-index:2;
}
.tileSlideshowArrowWrapperBottom{
  position:relative;
  bottom:-60px;
  left:calc(70% / 2);
  height:25px;
  width:30%;
  margin-right:-20px;
  margin-bottom:-80px;
  display:inline-block;
  background-color:rgba(0, 0, 0, 0.4);
  transition: background-color 0.3s;
  transform: translateY(calc(-150% - 40px));
    -webkit-transform: translateY(calc(-150% - 40px));
    -ms-transform: translateY(calc(-150% - 40px));
  z-index:2;
}
.tileSlideshowArrowWrapperLeft::before{
  content: '';
  display: block;
}
.tileSlideshowArrowWrapperRight::before{
  content: '';
  display: block;
}
.squareSlideshowArrowWrapperLeft{
  position:relative;
  top:0;
  right:10px;
  height:80px;
  width:20px;
  margin-right:-20px;
  display:inline-block;
  vertical-align:bottom;
  background-color:rgba(0, 0, 0, 0.4);
  transition: background-color 0.3s;
  transform: translateY(calc(-150% - 40px));
    -webkit-transform: translateY(calc(-150% - 40px));
    -ms-transform: translateY(calc(-150% - 40px));
  z-index:2;
}
.squareSlideshowArrowWrapperRight{
  position:relative;
  top:-50%;
  left:-10px;
  height:80px;
  width:20px;
  margin-right:-20px;
  display:inline-block;
  background-color:rgba(0, 0, 0, 0.4);
  transition: background-color 0.3s;
  transform: translateY(calc(-150% - 40px));
    -webkit-transform: translateY(calc(-150% - 40px));
    -ms-transform: translateY(calc(-150% - 40px));
  z-index:2;
}
.slideshowArrowWrapperLeft:hover,
.slideshowArrowWrapperRight:hover{
  background-color:rgba(0, 0, 0, 0.6);
}
.tileSlideshowArrowWrapperLeft:hover,
.tileSlideshowArrowWrapperRight:hover{
  background-color:rgba(0, 0, 0, 0.6);
}
.squareSlideshowArrowWrapperLeft:hover,
.squareSlideshowArrowWrapperRight:hover{
  background-color:rgba(0, 0, 0, 0.6);
}
.slideshowArrowLeft{
  position:absolute;
  top:45%;
  left:0;
}
.slideshowArrowRight{
  position:absolute;
  top:45%;
  right:60%;
}
.slideshowArrowLeft::before{
  width: 25px;
  height: 25px;
  border-top: 4px solid #FFF;
  border-right: 4px solid #FFF;
  -webkit-transform: rotate(-135deg) skew(calc((90deg - 30deg) / 2), calc((90deg - 30deg) / 2));
  transform: rotate(-135deg) skew(calc((90deg - 30deg) / 2), calc((90deg - 30deg) / 2));
}
.slideshowArrowRight::before{
  width: 25px;
  height: 25px;
  border-top: 4px solid #FFF;
  border-right: 4px solid #FFF;
  -webkit-transform: rotate(45deg) skew(calc((90deg - 30deg) / 2), calc((90deg - 30deg) / 2));
  transform: rotate(45deg) skew(calc((90deg - 30deg) / 2), calc((90deg - 30deg) / 2));
}
.slideshowArrowTop,
.slideshowArrowBottom{
  width:100%;
}
.slideshowArrowTop::before{
  left:calc(100% / 2 - 25px);
  width: 25px;
  height: 25px;
  border-top: 4px solid #FFF;
  border-right: 4px solid #FFF;
  -webkit-transform: rotate(-45deg) skew(calc((90deg - 30deg) / 2), calc((90deg - 30deg) / 2));
  transform: rotate(-45deg) skew(calc((90deg - 30deg) / 2), calc((90deg - 30deg) / 2));
}
.slideshowArrowBottom::before{
  left:calc(100% / 2 - 25px);
  width: 25px;
  height: 25px;
  border-top: 4px solid #FFF;
  border-right: 4px solid #FFF;
  -webkit-transform: rotate(135deg) skew(calc((90deg - 30deg) / 2), calc((90deg - 30deg) / 2));
  transform: rotate(135deg) skew(calc((90deg - 30deg) / 2), calc((90deg - 30deg) / 2));
}
.arrowDown::before{
  top: -5px;
  left:3px;
  height: 8px;
  width: 10px;
  border-bottom: 4px solid #FFF;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.arrowDown::after{
  top: -5px;
  left:3px;
  height: 8px;
  width: 10px;
  border-bottom: 4px solid #FFF;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.slideshowWrapper{
  height:auto;
  max-height:256px;
  min-height:100px;
}
.squareSlideshowWrapper{
  height:auto;
}
.slideshow{
  height:auto;
  max-height:256px;
  min-height:100px;
  width:100%;
  text-align:center;
}
.squareSlideshow{
  height:auto;
  width:100%;
  text-align:center;
}
.bunnerImageWrapper{
  position:relative;
  top:0;
  left:0;
  height:256px;
  width:90%;
  max-width:768px;
  margin:0 5px;
  display:inline-block;
  overflow:hidden;
  z-index:1;
}
.bunnerImageWrapper::before{
  content: '';
  display: block;
}
.squareImageWrapper{
  position:relative;
  top:0;
  left:0;
  width:95%;
  margin:0 auto;
  display:inline-block;
  z-index:1;
}
.squareImageWrapper::before{
  content: '';
  display: block;
  padding-top:100%;
}
.bunnerImage{
  position:absolute;
  top:50%;
  left:50%;
  height:100%;
  width:100%;
  vertical-align:middle;
  transform:translate(-50%, -50%);
  object-fit:cover;
}
.bunnerImage.bunnerImageLeft{
  left:0;
  max-width:512px;
  width:auto;
  transform:translateY(-50%);
}
.bunnerImage.bunnerImageRight{
  left:auto;
  right:0;
  height:auto;
  max-width:256px;
  width:auto;
  transform:translateY(-50%);
  background-color:rgba(255, 255, 255, 0.6);
}
.bunnerImage.page1{
  background-color:#F8C1BD;
}
.bunnerImage.sp{
  display:block;
}
.bunnerImage.pc{
  display:none;
}
.bunnerTextCenter{
  position: absolute;
  top:50%;
  left:50%;
  width:271px;
  color:#FFF;
  font-size:31px;
  transform: translate(-50%,-50%);
}
.bunnerTextRightButtom{
  position: absolute;
  bottom:10%;
  right:10%;
  width:275px;
  color:#000;
  font-size:20px;
}
.bunnerSlideshowArrowWrapperLeft{
  position:absolute;
  top:calc(50% - 2px);
  left:4%;
  height:256px;
  width:20px;
  margin-bottom:-80px;
  margin-right:-20px;
  display:inline-block;
  vertical-align:bottom;
  background-color:rgba(0, 0, 0, 0.4);
  transition: background-color 0.3s;
  transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
  z-index:2;
}
.bunnerSlideshowArrowWrapperRight{
  position:absolute;
  top:calc(50% - 2px);
  right:calc(4% + 20px);
  height:256px;
  width:20px;
  margin-bottom:-80px;
  margin-right:-20px;
  display:inline-block;
  background-color:rgba(0, 0, 0, 0.4);
  transition: background-color 0.3s;
  transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
  z-index:2;
}
.squareImage{
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:100%;
  width:100%;
  object-fit:cover;
}
.slideshowContentWrapper{
  width:95%;
  max-width:768px;
  margin:0 auto;
  display:inline-block;
}
.tileImageWrapper{
  position:relative;
  top:0;
  left:0;
  width:calc((100% / 3) - 7px);
  max-width:256px;
  /*
  min-width:100px;
  */
  display:inline-block;
  z-index:1;
}
.tileImageWrapper:nth-child(2){
  margin:0 10px;
}
.tileImageWrapper::before{
  content: '';
  display: block;
  padding-top:100%;
}
.tileImage{
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:100%;
  width:100%;
  object-fit:cover;
}
.nameWrapper{
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  padding:5px 0;
  text-align:center;
  color:#FFF;
  background-color:rgba(0,0,0,0.7);
  overflow-x:hidden;
  display:inline-block;
  z-index:2;
}
.menuBackground{
  position:fixed;
  top:0;
  right:0;
  height:100%;
  width:100%;
  background-color:rgba(0,0,0,0.3);
  display:none;
  z-index:1024;
}
.hamburguerMenu{
  position:fixed;
  top:0;
  right:-220px;
  height:100%;
  width:220px;
  background-color:#F4F4F4;
}
.hamburguerMenu li{
  padding:10px 0;
  color:#707070;
  /*border-bottom:solid 1px #707070;*/
}
.hamburguerMenu li a{
  color:#040404;
}
.hamburguerMenu li .empty{
  height:1em;
  width:1em;
  margin: 0 5px;
  display:inline-block;
}
.hamburguerMenu li img{
  height:1em;
  width:1em;
  margin: 0 5px;
  vertical-align:middle;
}
button:has(img[src="IMG/topSearchButton.png"]),
button:has(img[src="../IMG/topSearchButton.png"]){
  background-color:#F00;
}
img[src="IMG/topSearchButton.png"],
img[src="../IMG/topSearchButton.png"]{
  height:22px;
  width:22px;
}

@media screen and (min-width: 1080px){
  body{
    max-width:1240px;
    padding-top:0;
  }
  .bunnerImageWrapper{
    height:512px;
    width:90%;
    max-width:initial;
  }
  .bunnerImage.bunnerImageLeft{
    left:0;
    max-width:initial;
    width:calc((100% / 3) * 2);
  }
  .bunnerImage.bunnerImageRight{
    left:auto;
    right:0;
    max-width:initial;
    width:calc(100% / 3);
    background-color:rgba(255, 255, 255, 0.6);
  }
  .bunnerImage.sp{
    display:none;
  }
  .bunnerImage.pc{
    display:block;
  }
  .bunnerSlideshowArrowWrapperLeft,
  .bunnerSlideshowArrowWrapperRight{
    top:calc(50% - 3px);
    height:512px;
  }
}
