@charset "UTF-8";
/* CSS Document */

* {
	margin:0;
	padding:0;
  /*outline: 1px solid #eb5757;*/
}


body {
  font-family: noto-sans-cjk-jp, sans-serif;
  color: #2B2B2B;
  background-image: url(../image/back.jpg);
  background-size: 100%;
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}

.back {
  position:fixed;
  width:100vw;
  height:100vh;
  object-fit: cover;
  z-index: -1;
}

/* --------------- main --------------- */
.main {
  position: relative;
  width:100%;
  background-color: #B5B7B5;
  height:155vh;
}
@media screen and (max-width:1200px) {
	.main { height:170vh; }
}
@media screen and (max-width:1000px) {
	.main { height:150vh; }
}
@media screen and (max-width:757px) {
	.main { height:102vh; }
}

.main-img-1 {
  position: absolute;
  top:15vh;
  right:0;
  left:0;
  margin:auto;
  height:75vh;
}
@media screen and (max-width:1000px) {
	.main-img-1 { top:15vh; height:75vh; }
}
@media screen and (max-width:757px) {
	.main-img-1 { top:10vh; height:50vh; }
}

.main-img-2 {
  position: absolute;
  top:10vh;
  left:0;
  margin:auto;
  height:130vh;
}
@media screen and (max-width:1000px) {
	.main-img-2 { top:10vh; height:80vh; }
}
@media screen and (max-width:757px) {
	.main-img-2 { top:7vh; height:50vh; }
}

.main-img-3 {
  position: absolute;
  top:10vh;
  right:0;
  margin:auto;
  height:130vh;
}
@media screen and (max-width:1000px) {
	.main-img-3 { top:10vh; height:80vh; }
}
@media screen and (max-width:757px) {
	.main-img-3 { top:7vh; height:50vh; }
}

.main-img-4 {
  height:600px;
  width: 100vw;
}
@media screen and (max-width:757px) {
	.main-img-4 { height:250px; }
}

.main-moji {
  position: absolute;
  top:100vh;
  right:0;
  left:0;
  margin:auto;

  color:#423778;
  font-family: dnp-shuei-ymincho-std, sans-serif;
  font-size:30px;
  line-height: 80px;
  letter-spacing:2px;
  font-weight: bold;
  text-align: center;
}
@media screen and (max-width:757px) {
	.main-moji { top:65vh; font-size:18px; line-height:50px; letter-spacing:0px; }
}



/* --------------- item --------------- */
.item {
  width:100%;
  background-color: #B5B7B5;
  padding-bottom:230px;
}
@media screen and (max-width:757px) {
	.item { padding-bottom:100px; }
}

/* -- 浅漬け -- */
.item-hako-1 {
  position: relative;
  width:100%;
  padding-top:350px;
}
@media screen and (max-width:757px) {
	.item-hako-1 { padding-top:220px; height:880px; }
}

.item-img-main-1 {
  top:0;
  left:0;
  height:900px;
  width: 92%;
  object-fit: cover;
  border-radius: 0 120px 120px 0;
}
@media screen and (max-width:757px) {
	.item-img-main-1 { height:350px; border-radius: 0 50px 50px 0; }
}

.item-img-name-1 {
  position:absolute;
  top:15vh;
  left:10vw;
  height:600px;
}
@media screen and (max-width:757px) {
	.item-img-name-1 { top:5vh; left:10vw; height:300px; }
}

.item-img-pk-1 {
  position:absolute;
  top:13vh;
  right:13vw;
  height:550px;
}
@media screen and (max-width:757px) {
  .item-img-pk-1  { top:5vh; right:10vw; height:300px; }
}

.item-moji-1 {
  position:absolute;
  bottom:7vh;
  right:13vw;

  color:#fff;
  font-family: noto-sans-cjk-jp, sans-serif;
  font-size:18px;
  line-height:44px;
}
@media screen and (max-width:1030px) {
	.item-moji-1 {  width:80%; }
}
@media screen and (max-width:757px) {
	.item-moji-1 { bottom:30px; right:0; left:0; margin:auto; width:90%; color:#244863; font-size:15px; line-height: 32px; }
}


/* -- かす漬け -- */
.item-hako-2 {
  position: relative;
  width:100%;
  padding-top:350px;
}
@media screen and (max-width:757px) {
	.item-hako-2 { padding-top:220px; height:850px; }
}

.item-img-main-2 {
  top:0;
  left:0;
  height:90vh;
  width: 92%;
  object-fit: cover;
  border-radius: 0 120px 120px 0;
}
@media screen and (max-width:757px) {
	.item-img-main-2 { height:350px; border-radius: 0 50px 50px 0; }
}

.item-img-name-2 {
  position:absolute;
  top:15vh;
  right:20vw;
  height:600px;
}
@media screen and (max-width:757px) {
	.item-img-name-2 { top:5vh; right:15vw; height:300px; }
}

.item-img-pk-2 {
  position:absolute;
  top:13vh;
  left:8vw;
  height:550px;
}
@media screen and (max-width:757px) {
  .item-img-pk-2  { top:5vh; left:5vw; height:300px; }
}

.item-moji-2 {
  position:absolute;
  bottom:7vh;
  left:8vw;

  color:#fff;
  font-family: noto-sans-cjk-jp, sans-serif;
  font-size:18px;
  line-height:44px;
}
@media screen and (max-width:1030px) {
	.item-moji-2 {  width:80%; }
}
@media screen and (max-width:757px) {
	.item-moji-2 { bottom:0; right:0; left:0; margin:auto; width:90%; color:#244863; font-size:15px; line-height: 32px; }
}


/* ---------------point --------------- */
.point {
  position: relative;
  width:100%;
  background-color: #244863;
  padding:0;
  padding-top:350px;
  padding-bottom:100px;
}
@media screen and (max-width:1030px) {
  .point  { padding-top:250px; padding-bottom:200px; }
}
@media screen and (max-width:757px) {
  .point  { padding-top:200px; padding-bottom:200px; }
}

.inner{
  width: 100%;
}
.box{
  display: flex;
  flex-direction: row;
  margin-top:-100px;
}
.box + .box{
  margin-top: 80px;
}
.box__body{
  width: 40%;
  margin-right:2%;
  margin-left:10%;
}
.box__body-2{
  width: 40%;
  margin-left:0%;
  margin-right:10%;
}
.box__image{
  width: 60%;
}

.box:nth-child(odd) .box__image {
  margin-right: calc(50% - 50vw);
}

.box:nth-child(even) .box__image {
  margin-left: calc(50% - 50vw);
}

@media screen and (max-width:1000px){
  .box {
    display: block;
  }
  .box + .box{
    margin-top: 60px;
  }
  .box__body{
    width: 80%;
    margin-right:10%;
    margin-left:10%;
  }
  .box__body-2{
    width: 80%;
    margin-right:10%;
    margin-left:10%;
  }
  .box__image{
    margin-top: 20px;
    width: 100%;
  }
}

.box.reverse{
  flex-direction: row-reverse;
}


.point-moji-1 {
  display: inline-block;
  color:#fff;
  font-family: dnp-shuei-ymincho-std, sans-serif;
  font-size:41px;
  letter-spacing: 3px;
  line-height: 60px;
  font-weight: bold;
  margin-bottom:30px;
}
@media screen and (max-width:1000px) {
	.point-moji-1 { font-size:25px; line-height:40px; margin-bottom:10px; }
}

.point-moji-2 {
  color:#fff;
  font-family: noto-sans-cjk-jp, sans-serif;
  font-size:16px;
  line-height: 36px;
  text-align: justify;
}
@media screen and (max-width:1000px) {
	.point-moji-2 { font-size:15px; line-height: 32px; }
}

.point-img-1 {
  width:100%;
  margin-top:-25%;
}
@media screen and (max-width:1030px) {
  .point-img-1 { margin-top:0%; }
}
@media screen and (max-width:757px) {
  .point-img-1 { width:90%; margin-top:0%; margin-right:0; margin-left:10%; }
}

.point-img-2 {
  width:80%;
  margin-top:-25%;
  margin-left:10%;
}
@media screen and (max-width:1030px) {
  .point-img-2 { margin-top:0%; }
}
@media screen and (max-width:757px) {
  .point-img-2 { width:80%; margin-top:0%; margin-right:10%; margin-left:10%; }
}

.point-img-3 {
  width:90%;
  margin-top:-25%;
}
@media screen and (max-width:1030px) {
  .point-img-3 { margin-top:0%; }
}
@media screen and (max-width:757px) {
  .point-img-3 { width:90%; margin-top:0%; margin-right:5%; margin-left:5%; }
}

.point-img-4 {
  position: absolute;
  bottom:7%;
  left:0;
  width:40%;
}
@media screen and (max-width:1030px) {
  .point-img-4 { width:40%; bottom:30px; margin-right:40%; margin-left:0%; }
}
@media screen and (max-width:757px) {
  .point-img-4 { width:60%; bottom:30px; margin-right:40%; margin-left:0%; }
}






/* --------------- shop --------------- */
.shop {
  background-color: #B5B7B5;
  margin:0;
  padding-top:100px;
  padding-bottom:150px;
  text-align: center;
}
@media screen and (max-width:757px) {
	.shop { padding-top:50px; padding-bottom:80px; }
}

.shop-moji-1 {
  color:#244863;
  font-family: poppins, sans-serif;
  font-size:68px;
  letter-spacing: 3px;
  font-weight: bold;
  text-align: center;
  margin-bottom:30px;
}
@media screen and (max-width:757px) {
	.shop-moji-1 { font-size:50px; margin-bottom:0px; }
}

.shop-hako {
  display: inline-block;
  width:380px;
  text-align: justify;
  margin:40px;
}
@media screen and (max-width:1030px) {
	.shop-hako { width:38%; margin:3%; }
}
@media screen and (max-width:757px) {
	.shop-hako { width:80%; margin:10%; }
}

.shop-img {
  width:100%;
}

.shop-moji-2 {
  color:#244863;
  font-family: dnp-shuei-ymincho-std, sans-serif;
  font-size:25px;
  line-height: 36px;
  font-weight: bold;
  margin-top:30px;
  margin-bottom:10px;
}
@media screen and (max-width:757px) {
	.shop-moji-2 { font-size:22px; margin-top:20px; margin-bottom:5px; }
}

.shop-moji-3 {
  color:#244863;
  font-family: noto-sans-cjk-jp, sans-serif;
  font-size:16px;
  line-height: 32px;
}
@media screen and (max-width:757px) {
	.shop-moji-3 { font-size:15px; line-height: 32px; }
}

.shop-moji-4 {
  color:#244863;
  font-family: dnp-shuei-ymincho-std, sans-serif;
  font-size:28px;
  font-weight: bold;
  margin-top:10px;
}
@media screen and (max-width:757px) {
	.shop-moji-4 { margin-top:5px; font-size:24px; }
}
.shop-moji-4 span {
  font-size:13px;
  font-family: noto-sans-cjk-jp, sans-serif;
  font-weight: normal;
  margin-left: 5px;
}

/* ---ボタン-----  */
.policy-btn {
  margin-top:30px;
}

.sample_button12 {
  display: inline-block;
  width: 100%;
  font-family: noto-sans-cjk-jp, sans-serif;
  font-size:17px;
  text-align: center;
  text-decoration: none;
  line-height: 50px;
  outline: none;
  border:solid 1px #244863;
  border-radius: 999px;
  position: relative;
  z-index: 1;
  overflow: hidden;
  transition: all 0.3s ease;
  color: #244863;
}
.sample_button12:hover,
.sample_button12:hover span {
  color:#fff;
}
.sample_button12:hover::before {
  transform: scale(1) translate(-50%,-50%);
  color:#fff;
}
.sample_button12::before {
  content: '';
  width: 120%;
  padding-top: 120%;
  border-radius: 100%;
  background-color:#244863;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  transform-origin: top left;
  transform: scale(0) translate(-50%,-50%);
  transition: inherit;
}