@charset "UTF-8";

/* CSS Document */



/* --------------------

color

--------------------- */

:root {

  --red: #93181d;

}



/* --------------------

base

--------------------- */

html {

  width: 100%;

  font-size: 10px;

  overscroll-behavior-y: none;

}

body {

  position: relative;

  overflow-x: hidden;

  height: 100%;

  text-align: left;

  line-height: 2;

  font-family: "Noto Sans JP", "メイリオ", Meiryo, "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "ＭＳ Ｐゴシック", "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;

  font-size: 1.6rem;

  font-weight: normal;

  color: #333;

  background: #fff;

}

body * {

  outline: none;

}

img {

  max-width: 100%;

  height: auto;

  vertical-align: bottom;

}

a {

	transition: 0.25s;

}



@media screen and (min-width: 769px) {



  a:hover {

    opacity: 0.5;

  }



}



@media screen and (max-width: 768px) {



  body {

    font-size: min(1.4rem, 3.73vw);

  }



}



/* --------------------

style

--------------------- */

body {

  border-left: solid 10px var(--red);

  border-right: solid 10px var(--red);

}

h2 {

  position: relative;

  margin: 1em 0 2em;

  text-align: center;

  font-family: "ta-fuga-fude", sans-serif;

  font-size: 2.5em;

}

h2.-vertical {

  writing-mode: vertical-rl;

  text-align: left;

  letter-spacing: 0.1em;

}

h2::before,

h2::after {

  content: '';

  position: absolute;

  display: block;

  left: calc(50% - 1px);

  top: calc(-1.8em - 30px);

  width: 2px;

  /*height: 60px;*/

  height: 0;

  background: var(--red);

  transition: height 0.5s;

}

h2::before {

  background: #fff;

}

h2.on::before,

h2.on::after {

  height: 60px;

}

h2 span {

  display: inline-block;

  opacity: 0;

  transform: translateY(20px);

  transition: opacity 0.5s 0.25s, transform 0.5s 0.25s;

}

h2.on span {

  opacity: 1;

  transform: translateY(0);

}



@media screen and (max-width: 768px) {



  h2 {

    margin: 1em 0 1em;

    font-size: 1.65em;

  }

  h2::before,

  h2::after {

   /* height: 44px;*/

    top: calc(-1.65em - 22px);

  }

  h2.on::before,

  h2.on::after {

    height: 44px;

  }



}



/*.kv */

.kv {

  padding-bottom: 3em;

  background: #fff;

}

.kv img {

  width: 100%;

}



/* 南之方（みなんかた）とは */

.about {

  padding: 2em 2em 10em;

  background-color: #f9f9f9;

  background-image: url("../img/bg_circle.svg"), url("../img/bg_sand.webp");

  background-repeat: no-repeat, repeat;

  background-position: 50% 100%, 0 0;

  background-size: 6200px auto, auto;

}

.about h2 {

  font-size: 2.25em;

}

.about h2::after {

  width: 1px;

  background: #333;

}

.about p {

  text-align: center;

  line-height: 3.125;

}



@media screen and (max-width: 768px) {



  .about {

    padding-bottom: 5em;

  }

  .about h2 {

    margin-bottom: 1.5em;

    font-size: 1.4em;

  }

  .about p {

    text-align: left;

    line-height: 2.15;

  }



}



@media screen and (max-width: 640px) {



  .about {

    background-size: 1600px auto, auto;

  }



}



@media screen and (max-width: 480px) {



  .about {

    background-size: 800px auto, auto;

  }



}



/* 南之方の味わい */

.taste {

  position: relative;

  padding: 3.8em 0 8em;

  background-color: #f9f9f9;

  background-image: url("../img/bg_sand.webp"), linear-gradient(to top, #f2f2f2, transparent);

  background-repeat: repeat, repeat-x;

  background-position: 0 0, 0 100%;

  background-size: auto, 100% 40px;

}

.taste::after {

  content: '';

  position: absolute;

  display: block;

  left: 0;

  top: calc(67% - 200px);

  width: 400px;

  height: 200px;

  background: url("../img/bg_taste.webp") no-repeat 0 0;

  background-size: contain;

}

.taste__inner1 {

  display: flex;

  flex-direction: row-reverse;

  align-items: flex-start;

  gap: 3em;

  max-width: 1240px;

  margin: 0 auto 2em;

}

.taste__inner1 h2 {

  margin-top: 0;

  margin-right: 2em;

  padding-top: 0.5em;

}

.taste__text {

  padding-top: 1em;

}

.taste__text  span {

  color: var(--red);

  font-weight: bold;

}

.taste .-note {

  margin-top: 5em;

  padding-left: 1em;

  text-indent: -1em;

  font-size: 0.8125em;

  color: #5c5c5c;

}

.taste__photo {

  position: relative;

  display: flex;

  justify-content: flex-start;

  flex-shrink: 0;

  width: 50%;

  top: 8em;

}

.taste__photo .-note {

  position: absolute;

  bottom: 0.25em;

  right: 0.25em;

}

.taste__inner2 {

  display: flex;

  justify-content: flex-end;

   max-width: 1240px;

  margin: 0 auto;

  padding-right: 4em;

  text-align: center;

}

.taste__inner2 h3 {

  position: relative;

  margin: 0.5em 0 1.5em;

  text-align: center;

  font-family: "Noto Serif JP", serif;

  font-size: 1.35em;

  font-weight: 700;

}

.taste__inner2 h3::before {

  content: '';

  position: absolute;

  display: block;

  left: calc(50% - 1px);

  top: -1.25em;

  width: 1px;

  height: 30px;

  background: var(--red);

}

.taste__inner2 figure {

  position: relative;

}

.taste__inner2 figure .-float {

  position: absolute;

  top: 0;

  left: 0;

}

.taste__inner2 .-note {

  margin-top: 1em;

}



@media screen and (max-width: 960px) {



  .taste {

    padding-bottom: 5em;

  }

  .taste::after {

    left: 0;

    top: -2.5em;

    width: 220px;

    height: 110px;

  }

  .taste .-note {

    font-size: 0.9em;

  }

  .taste__inner1, 

  .taste__inner2 {

    max-width: 768px;

  }

  .taste__inner1 {

    flex-direction: column-reverse;

  }

  .taste__inner1 h2 {

    z-index: 1;

    order: 3;

    position: absolute;

    margin-right: 0;

    right: 0.5em;

    top: 2em;

  }

  .taste__photo {

    order: 2;

    top: 0;

    width: 100%;

    margin-bottom: 3em;

  }

  .taste__photo figure {

    position: relative;

  }

  .taste__photo figure:nth-of-type(2) {

    bottom: -5.5em;

  }

  .taste__photo .-note {

    position: absolute;

    bottom: -2em;

    right: auto;

    left: 1.5em;

  }

  .taste__text {

    order: 1;

    

  }

  .taste__text {

    padding: 1em 1.5em;

  }

  .taste__text .-note {

    margin-top: 2em;

  }

  .taste__inner2 {

    justify-content: center;

    padding-right: 0;

  }

  .taste__inner2 h3::before {

    top: -1.5em;

    height: 25px;

  }



}



/* こだわりの製法 */

.method {

  

  padding: 2em 0 10em;

  background: url("../img/bg_method1.webp") no-repeat top 8em right 4em, url("../img/bg_method2.webp") no-repeat bottom 2em left 0;

  background-size: 236px auto, 376px auto;

  background-color: #fff;

}

.method h2 {

  display: inline-block;

  width: 50%;

  margin-bottom: 1.5em;

}

.method__inner {

overflow-x: hidden;

  display: flex;

  gap: 2em;

  align-items: center;

  max-width: 1240px;

  margin: 0 auto;

}

.method__inner:nth-of-type(even) {

  flex-direction: row-reverse;

}

.method__inner figure {

  width: calc(50% - 1em);

}

.method__inner p {

  width: calc(50% - 1em);

  padding-right: 4em;

}

.method__inner:nth-of-type(even) p {

  padding-left: 4em;

}

.method__inner p span {

  font-weight: bold;

  color: var(--red);

}



@media screen and (max-width: 768px) {



  .method {

    padding: 1em 0 4em;

    background: url("../img/bg_method1.webp") no-repeat top 4.5em right 0.5em;

    background-size: 88px auto;

  }

  .method h2 {

    display: block;

    width: auto;

  }

  .method__inner, 

  .method__inner:nth-of-type(even){

    flex-direction: column;

    gap: 1em;

  }

  .method__inner + .method__inner {

    margin-top: 3em;

  }

  .method__inner figure {

    width: auto;

  }

  .method__inner p, 

  .method__inner:nth-of-type(even) p {

    width: auto;

    padding-left: 2em;

    padding-right: 2em;

  }



}



/* 美味しい飲み方 */

.rcmnd {

  padding: 2em;

  background-color: #f9f9f9;

  background-image: url("../img/bg_sand.webp"), linear-gradient(to bottom, rgba(0,0,0,0.05), transparent);

  background-size: auto, 100% 40px;

  background-repeat: repeat, no-repeat;

}

.rcmnd__inner {

  display: flex;

  justify-content: space-between;

  flex-direction: row-reverse;

  gap: 2em;

  max-width: 1050px;

  margin: 0 auto;

}

.rcmnd__list {

  display: flex;

  gap: 2em;

  margin: 3em 0 8em;

}

.rcmnd__list li {

  position: relative;

  width: 100%;

  max-width: 278px;

  background: #fff;

  padding: 1em;

  text-align: center;

}

.rcmnd__list li:nth-child(1), 

.rcmnd__list li:nth-child(1) .para {

  transition-delay: 0.75s;

}

.rcmnd__list li:nth-child(2), 

.rcmnd__list li:nth-child(2) .para {

  transition-delay: 0.5s;

}

.rcmnd__list li:nth-child(3) , 

.rcmnd__list li:nth-child(3) .para {

  transition-delay: 0.25s;

}

.rcmnd__list span {

  position: absolute;

  display: block;

  top: -20px;

  left: -10px;

}

.rcmnd__list figure {

  position: relative;

  left: -1em;

  top: -1em;

  width: calc(100% + 2em);

}

.rcmnd__list h3 {

  position: relative;

  display: inline-block;

  margin: 0 auto 0.5em;

  padding-bottom: 0.15em;

  font-family: "Noto Serif JP", serif;

  font-size: 1.5em;

  font-weight: 700;

  border-bottom: solid 1px var(--red);

}

.rcmnd__ratio {

  margin-bottom: 1em;

  font-family: "Noto Serif JP", serif;

  font-size: 1.15em;

  font-weight: 700;

}

.rcmnd__text {

  text-align: left;

}



@media screen and (max-width: 768px) {



  .rcmnd {

    padding: 1em;

  }

  .rcmnd h2.-vertical {

    writing-mode: initial;

    margin-bottom: 0;

    text-align: center;

  }

  .rcmnd__inner {

    justify-content: center;

    flex-direction: column;

  }

  .rcmnd__list {

    flex-direction: column;

    gap: 0;

    margin: 0 auto 3em;

  }

  .rcmnd__list li {

    padding-bottom: 2em;

  }

  .rcmnd__list li:nth-child(1), 

  .rcmnd__list li:nth-child(1) .para, 

  .rcmnd__list li:nth-child(2), 

  .rcmnd__list li:nth-child(2) .para, 

  .rcmnd__list li:nth-child(3), 

  .rcmnd__list li:nth-child(3) .para {

    transition-delay: 0s;

  }



}



/* bg_mountain */

.bg_mountain {

  padding-top: 27.2%;

  background: url("../img/bg_mountain.webp") no-repeat 50% 40%;

  background-size: cover;

}



@media screen and (max-width: 768px) {



  .bg_mountain {

    padding-top: 66%;

    background-image: url("../img/bg_mountain_sp.webp");

  }



}



/*.南之方×家庭料理 */

.cooking {

  padding: 2em 0 3em;

  background-color: #fff;

}

.cooking__inner {

  overflow-x: hidden;

  padding: 0 2em 2em;

}

.cooking h2 {

  padding-left: 1em;

}

.cooking h2::after {

  /*height: 30px;*/

  top: -1.8em;

  transition: height 0.25s 0.25s;

}

.cooking h2.on::after {

  height: 30px;

}

.cooking h2 span span {

  display: inline-block;

  padding: 0 0.25em;

  font-family: "Noto Sans JP", sans-serif;

  transition-delay: 0s;

}

.cooking__lead {

  margin-bottom: 4em;

  padding: 0 1em;

  text-align: center;

  line-height: 2.75;

}

.cooking__list {

  z-index: 1;

  position: relative;

  display: flex;

  flex-direction: column;

  gap: 4em;

  max-width: 1100px;

  margin: 0 auto;

}

.cooking__list li {

  position: relative;

  display: flex;

  justify-content: center;

  height: 100%;

}

.cooking__list li::after {

  z-index: -1;

  content: '';

  position: absolute;

  display: block;

  top: 0;

  left: 0;

  width: 200%;

  height: 100%;

  background: #f9f9ec url("../img/bg_sand.webp");

}

.cooking__list li:nth-child(even)::after {

  left: auto;

  right: 0;

  background-color: #f5f0f5;

}

.cooking__list figure {

  position: relative;

  flex-shrink: 0;

  width: 36%;

  text-align: center;

}

.cooking__list h3 {

  z-index: 1;

  position: relative;

  display: flex;

  justify-content: center;

  align-items: center;

  flex-shrink: 0;

  width: 28%;

  height: auto;

  text-align: center;

  line-height: 1.25;

  font-family: "Noto Serif JP", serif;

  font-size: min(1.5em, 2vw);

  font-weight: 700;

  color: #fff;

}

.cooking__list h3 span span {

  display: block;

  font-size: 1.75em;

}

.cooking__list h3::before {

  z-index: -1;

  content: '';

  position: absolute;

  display: block;

  top: -8%;

  left: -8%;

  width: 116%;

  height: 116%;

  background: url("../img/bg_cooking.webp") no-repeat 50% 50%;

  background-size: contain;

}

.cooking__list p {

  display: flex;

  align-items: center;

  width: 36%;

  flex-shrink: 0;

  padding: 0 0 0 1em;

}

.cooking__list li:nth-child(even) p  {

  padding: 0 1em 0 0;

}

.cooking__list .-multi {

  position: absolute;

  width: 76%;

}

.cooking__list .-multi:nth-of-type(1) {

  bottom: -35px;

  left: 0;

}

.cooking__list .-multi:nth-of-type(2) {

  top: -35px;

  right: 0;

}



@media screen and (max-width: 768px) {



  .cooking {

    padding: 1em 0 0;

  }

  .cooking__lead {

    text-align: left;

  }

  .cooking__inner {

    padding: 0 0.5em 2em;

  }

  .cooking h2 {

    padding-left: 0;

  }

  .cooking h2::after {

    /*height: 22px;*/

    top: -1.65em;

  }

  .cooking h2.on::after {

    height: 22px;

  }

  

  .cooking__list {

    align-items: center;

    gap: 1.5em;

  }

  .cooking__list li {

    flex-direction: column;

    gap: 1em;

    max-width: 460px;

    

  }

  .cooking__list li:nth-child(even) {

    flex-direction: column-reverse;

  }

  .cooking__list li::after, 

  .cooking__list li:nth-child(even)::after {

    width: calc(100% - 1em);

    left: 0.5em;

    right: auto;

    top: 1em;

  }

  .cooking__list figure, 

  .cooking__list h3, 

  .cooking__list p {

    width: auto;

  }

  .cooking__list h3 {

    font-size: 1.65em;

    color: var(--red);

  }

  .cooking__list h3::before {

    content: none;

  }

  .cooking__list p {

    padding: 1em 1.5em 2em!important;

  }

  .cooking__list .-multi {

    display: none;

  }



}



/* cta */

.cta {

  display: flex;

  justify-content: center;

  align-items: flex-end;

  gap: 3.5em;

  padding: 2em;

  margin: 0 auto;

  background: linear-gradient(to top, #f2f3f9, #fff) repeat-x left 0 bottom 0;

  background-size: 100% 380px;

  background-color: #fff;

}

.cta > div {

  display: flex;

  flex-direction: column;

  gap: 1.5em;

  margin-bottom: 2em;

  line-height: 1.5;

}

.cta__link br {

  display: none;

}

.cta__link a {

  position: relative;

  display: inline-block;

  margin-left: 0.5em;

  padding: 0 0.25em 2px 0.5em;

  line-height: 1.5;

  border-right: solid 1px #333;

  background: #333;

  color: #fff;

}

.cta__link a::after {

  content: '';

  position: absolute;

  display: block;

  top: 0;

  left: calc(100% + 0.5px);

  width: 10px;

  height: 100%;

  clip-path: polygon(0 0,100% 50%, 0 100%);

  background: #333;

}



@media screen and (max-width: 1100px) {



  .cta__link br {

    display: inline;

  }

  .cta__link a {

    margin: 0.5em 0 0 0;

  }



}



@media screen and (max-width: 768px) {



  .cta {

    align-items: center;

    flex-direction: column;

    gap: 1em;

    padding-bottom: 3em;

  }

  .cta > div {

    gap: 2em;

  }

  .cta__title, .cta__link {

    text-align: center;

  }

  .cta__title {

    font-size: 1.1em;

  }

  .cta__link a {

    font-size: 1.4em;

  }



}



/*.footer */

footer {

  display: flex;

  flex-direction: column;

  gap: 3em;

  padding: 5em 2em;

  text-align: center;

  background: var(--red) url("../img/bg_circle.svg") no-repeat left 50% bottom 10px;

  background-size: 6200px auto;

}

small {

  font-size: 1.05em;

}



@media screen and (max-width: 768px) {



  footer {

    gap: 2em;

    padding-top: 3em;

  }



}



@media screen and (max-width: 640px) {



  footer {

    background-size: 1600px auto;

  }



}



@media screen and (max-width: 480px) {



  footer {

    background-size: 800px auto;

  }



}



/* paralax */

.slideup {

  opacity: 0;

  transform: translateY(20px);

  transition: opacity 0.5s, transform 0.5s;

}

.para.on.slideup {

  opacity: 1;

  transform: translateY(0);

}

.slideleft {

  opacity: 0;

  transform: translateX(-20px);

  transition: opacity 0.5s, transform 0.5s;

}

.para.on.slideleft {

  opacity: 1;

  transform: translateX(0);

}

.slideright {

  opacity: 0;

  transform: translateX(20px);

  transition: opacity 0.5s, transform 0.5s;

}

.para.on.slideright {

  opacity: 1;

  transform: translateX(0);

}

.scaleup {

  transform: scale(0);

  transition:transform 0.5s;

}

.para.on.scaleup {

  transform: scale(1);

}

.delay1 {

  transition-delay: 0.25s;

}

.delay2 {

  transition-delay: 0.5s;

}

.delay3 {

  transition-delay: 0.75s;

}