@charset "utf-8";
.hero {
  height: 100vh;
  background: #ccc; /* 仮の背景色や画像 */
  position: relative;
}
h3{
  margin-top: 100px;
}

/*-------------------------------------------
Mainvisual (アニメーション切替速度要調整)
-------------------------------------------*/
.kv {
  height: 100vh;
  width: 100%;
  overflow: hidden;
}
.mainvisual .fade-img li{
  height: 100vh;
}
.kv img {
  width: 100%;
  object-fit: cover;
}
.fade-img img{
  height: 100vh;
}
.mainvisual {
  height: 100vh;
  position: relative;
}
.mainvisual .fade-img {
  height: 100vh;
  width: 100%;
}
.mainvisual .fade-img img {
  width: 100%;
  object-fit: cover;
}
.mainvisual .fade-img li {
  width: 100%;
  position: absolute;
  right: 0;
  opacity: 0;
  animation: fade 27s infinite;
}
.mainvisual .fade-img li:nth-child(1) {
  animation-delay: 0s;
}
.mainvisual .fade-img li:nth-child(2) {
  animation-delay: 9s;
}
.mainvisual .fade-img li:nth-child(3) {
  animation-delay: 18s;
}
.s_fade-img{
  display: none;
}
@keyframes fade {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  42% {
    opacity: 1;
  }
  60% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.mainvisual .mv_logo {
  position: absolute;
  top: 15%;
  left: 6%;
  width: 29vw;
}
.mainvisual .mv_txt {
  font-size: 2vw;
  color: #fff;
}

/*-------------------------------------------
Section いちいちの想い
-------------------------------------------*/
.aboutSec{
  padding-top: 22vh;
  /* background-color: #ffffff91; */
  background: linear-gradient(#ffffff82, #fdfdfdad, #f3f3f3bd, #ffffffd4, #ffffff);
}
.aboutSec::after {
  content: "";
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  z-index: -1;
  background: url(../images/mainvisual3.webp) no-repeat;
  background-size: cover;
}
.ichisec_tamaring{
  width: 75%;
}
.ichisec_landscape{
  width: 65%;
}
.aboutSec .itiiti {
  width: 100%;
  padding-bottom: 50px;
  text-align: center;
  font-size: 64px;
}
.itiiti h2{
  margin-top: 0;
  padding-top: 0;
}
.itiiti .itiiti_p{
  font-size: 20px;
}
.aboutSec .flexbox {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.aboutSec .flexbox .left {
  width: 40%;
  writing-mode: vertical-rl;
}
.aboutSec .flexbox .left p {
  padding: 0 17px;
  font-size: 36px;
  text-align: center;
  letter-spacing: 0.5em;
}
.aboutSec .flexbox .right {
  width: 60%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-content: flex-end;
}
.aboutSec .flexbox .right p {
  margin-bottom: 25px;
  padding: 20px 17px;
  font-size: 20px;
  text-align: left;
}
.s_ichisec_tamaring{
  display: none;
}

/*********** Section おすすめ **************/
.osusume{
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}
.osusume h2{
  margin-top: 0;
  background: url(../images/maru1.webp) no-repeat center;
  background-position: calc(50% - 85px) center;
  background-size: 96px auto;
  }
.t_ring{
  width: 40%;
  margin: 100px auto
}
.kodawari{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}
.kodawari p {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 32px;
  line-height: 1.5;
  letter-spacing: 0.5em;
  margin-top: 0;
}
.kodawari p span{
  display: inline-block;
  transform: translateY(-80px);
}
.bottom{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.sugiwara{
  width: 35%;
}
.bansyuu{
  width: 35%;
}
.recsec1{
  width: 100%;
}
.recsec2{
  width: 80%;
  display: flex;
  align-items: center;
  padding-left: 5%;
}
.s_recsec2{
  display: none;
}
.sugiwara{
  width: 40%;
}
.bansyuu{
  width: 40%;
}
.kita{
  width: 100%;
  }
.kita h2{
  background: url(../../about/images/circle.webp) no-repeat center;
    background-position: calc(50% - 185px) calc(50% + 5px);
    background-size: 96px auto;
}
.kita a{
  display: inline-block;
}
.kita a:hover{
  transform: scale(1.05);
  transition: transform 0.3s ease;
}
.tizu {
  position: relative;
  width: 100%;
  max-width: 1400px;
  aspect-ratio: 16 / 9; /* 背景の縦横比を維持 */
  margin: 0 auto;
  background: url(../images/tizu.webp) no-repeat center center;
  background-size: contain;
  background-color: #fff;
}

/* 各市町ピン */
.point {
  width: 30%;
  position: absolute;
  display: flex;
  align-items: center;   /* 画像とテキストの垂直位置を揃える */
  gap: 15%;              /* アイコンとテキストの間隔 */
  transform: translate(-50%, -50%); /* 中心で配置 */
}
.photo {
  width: 50%;
  height: auto;
}
.point .a{
  width: 40%;
}
.point p {
  margin-top: 5px;
  background-color: #fff;
  border: 3px solid #A5B698;
  border-radius: 25px;
  padding: 5px 16px;
  font-size: 18px;
  text-align: center;
  transition: background-color .5s ease, color .5s ease;
}
.point a:hover p{
  background: none;
  background-color: #A5B698;
  color: #fff;
}

/* 各市町の位置指定（% は親要素 .tizu に対する比率） */
.taka {
  top: 25%;
  left: 29%;
}
.kasai {
  top: 60%;
  left: 23%;
}
.ono {
  top: 81%;
  left: 32%;
}
.nishiwaki {
  top: 36%;
  left: 68%;
}
.kato {
  top: 55%;
  left: 71%;
}
.miki {
  top: 79%;
  left: 71%;
}
.s_photo{
  display: none;
}
.top_about{
  text-align: right;
  margin-top: 50px;
}
.t_a {
  display: inline-block;
  transition: transform 0.3s ease;
}
.t_a:hover{
  transform: translateX(10px);
}
.torikumi h2{
  width: 100%;
  background: url(../images/maru3.webp) no-repeat center;
  background-position: calc(50% - 210px) calc(50% + 5px);
  background-size: 96px;
}
.center{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: left;
}
.project_content{
  width: 85%;
  margin: 0 auto;
}
.project p{
  width: 100%;
  text-align: left;
}
.underline{
  background: linear-gradient(transparent 70%, rgba(165,182,152,0.4) 70%);
}
.project_img{
  margin-top: 50px;
}
.project .taberu{
  position: relative;
}
.taberu::before {
  content: "";
  width: 80px;
  height: 100px;
  background: url(../images/as2.webp) no-repeat center / contain;
  position: absolute;
  left: 50%;
  top: -120px;
  transform: translateX(-270px);
  rotate: -20deg;
  background-size: 50px auto;
}
.taberu::after {
  content: "";
  width: 80px;
  height: 100px;
  background: url(../images/as1.webp) no-repeat center / contain;
  position: absolute;
  left: 49%;
  top: -92px;
  transform: translateX(185px);
  rotate: 20deg;
  background-size: 50px auto;
}
.project_img{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 50px auto 0;
}
.project_img img {
  width: 45%;
  height: auto;
  object-fit: cover;
}
.project_text{
  width: 100%;
}
.eatin h2{
  background: url(../images/circle.webp) no-repeat center;
  background-position: calc(50% - 210px) calc(50% + 5px);
  background-size: 96px auto;
}
.insta h2{
  background: url(../images/maru4.webp) no-repeat center;
  background-position: calc(50% - 85px) calc(50% + 15px);
  background-size: 72px;
}
.insta .content{
  display: flex;
  justify-content: center;
  position: relative;
}
.insta .content::after{
  display: block;
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}
.insta .Black{
  position: relative;
  z-index: 100;
}
.insta a{
  width: 765px;
  display: block;
  margin: 0 auto;
}
.insta a:last-child{
  display: block;
  width: 40%;
  margin: 0 auto;
}
.insta .insta_id{
  width: 100%;
  color: #fff;
  background-color: #A5B698;
  font-size: 24px;
  padding: 20px 0;
  margin: 30px auto 0;
  text-align: center;
  border-radius: 58px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  overflow: hidden;
  position: relative;
  z-index: 2;
  line-height: 1.5;
}
.insta .insta_id::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 110%;
  height: 200%;
  background: #758767;
  border-radius: 100%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  transition: transform .5s ease-in-out, opacity .5s ease-in-out;
  z-index: -1;
}
.insta .insta_id:hover::after {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}
.insta .insta_id .insta_img{
  width: 35px;
}
.insta .insta_id .insta_p{
  display: flex;
  align-items: center;
  font-family: "Noto Sans", sans-serif;
  margin-left: 30px;
  margin-top: 0;
}

/*【タブレット】
================= */
@media screen and (max-width: 900px) {
  h3{
    margin-top: 50px;
  }
  .center{
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .project h3{
    margin-top: 80px;
    margin-bottom: 50px;
  }
  .project .h3 h3:last-child{
    margin-top: 100px;
  }
  .aboutSec {
    padding-top: 16vh;
  }
  .br{
    display: none;
  }
  .aboutSec .flexbox .left p {
    font-size: 32px;
    margin-top: 0;
    padding: 0;
    letter-spacing: 0.3em;
  }
  .aboutSec .flexbox .right p {
    font-size: 16px;
  }
  .fade-img{
    display: none;
  }
  .s_fade-img{
    display: block;
  }
  .mainvisual .s_fade-img li{
    height: 100vh;
  }
  .mainvisual .s_fade-img {
    height: 100vh;
    width: 100%;
  }
  .mainvisual .s_fade-img img {
    width: 100%;
    height: 100vh;
    object-fit: cover;
  }
  .mainvisual .s_fade-img li {
    width: 100%;
    position: absolute;
    right: 0;
    opacity: 0;
    animation: fade 15s infinite;
  }
  .mainvisual .s_fade-img li:nth-child(1) {
    animation-delay: 0s;
  }
  .mainvisual .s_fade-img li:nth-child(2) {
    animation-delay: 5s;
  }
  .mainvisual .s_fade-img li:nth-child(3) {
    animation-delay: 10s;
  }
  .mainvisual .mv_logo {
    width: 50vw;
    left: auto;
    right: 25%;
    top: 15%;
  }
  .mainvisual .mv_txt {
    font-size: 3.5vw;
  }
  .kodawari p{
    font-size: 24px;
  }
  .recsec2{
    padding-left: 0;
  }
  .osusume{
    text-align: left;
  }
  .t_ring {
    width: 40%;
    margin-top: 80px;
  }
  .t_ring,.sugiwara,.bansyuu{
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .kita h2{
    margin-top: 50px;
    margin-bottom: 40px;
    background-position: calc(50% - 125px) calc(50% + 10px);
    background-size: 64px auto;
  }
  .top_about {
    margin-top: 25px;
  }
  .project p {
    text-align: left;
  }
  .project .project_p{
    text-align: left;
  }
  .project_img img{
    width: 45%;
  }
  .osusume h2{
    background-position: calc(50% - 60px) calc(50% + 10px);
    background-size: 64px auto; 
  }
  .point p {
    text-align: center;
    border: 2px solid #A5B698;
    padding: 0 5px;
    font-size: 16px;
  }
  .torikumi h2 {
    background-position: calc(50% - 140px) calc(50% + 10px);
    background-size: 64px auto; 
  }
  .taberu::before {
    background-size: 40px auto;
    transform: translateX(-211px);
    top: -85px;
    width: 35px;
    height: 65px;
  }
  .taberu::after {
    background-size: 40px auto;
    transform: translateX(170px);
    top: -72px;
    width: 35px;
    height: 65px;
  }
  .project_img {
    margin-top: 40px;
  }
  .eatin h2{
    background-position: calc(50% - 153px) calc(50% + 5px);
  }
  .eatin .project_p {
    margin-bottom: 40px;
    text-align: left;
  }
  .insta h2{
    background-position: calc(50% - 70px) calc(50% + 10px);
  }
  .insta .insta_id{
    font-size: 24px;
  }
  .insta a:last-child {
    width: 50%;
  }
    .insta .insta_id .insta_img{
    width: 30px;
  }
  .insta .insta_id .insta_p{
    margin-left: 15px;
  }
  /* Instagramのレスポンシブ対応が出来るまでの応急処置 */
  .content iframe{
    height: 200px !important;
  }
}

/*【スマホ】
================= */
@media screen and (max-width: 640px) {
  .aboutSec {
    padding-top: 8vh;
    background: linear-gradient(#ffffff00, #fdfdfd26, #f3f3f38c, #ffffffd4, #ffffff);
  }
  .s_ichisec_tamaring{
    width: 80%;
  }
  .s_ichisec_tamaring img{
    width: 100%;
    object-fit: cover;
  }
  .aboutSec{
    background-color: #ffffffad;
  }
  .aboutSec .flexbox .left p {
    font-size: 20px;
    padding: 0 23px;
  }
  .itiiti_p{
    margin-top: 40px;
  }
  .aboutSec .flexbox .right p {
    margin-bottom: 0;
    margin: 40px auto 0;
  }
  .kodawari{
    transform: translateX(0);
  }
  .kodawari p {
    font-size: 20px;
    letter-spacing: 0.3em;
  }
  .kodawari p span {
    transform: translateY(-50px);
  }
  .recsec2{
    display: none;
  }
  .s_recsec2{
    display: block;
    width: 80%;
    display: flex;
    align-items: center;
  }
  .s_recsec2 img{
    width: 100%;
    object-fit: cover;
  }
  .aboutSec .flexbox {
    display: block;
  }
  .ichisec_tamaring{
    display: none;
  }
  .s_ichisec_tamaring{
    display: block;
  }
  .aboutSec .flexbox .left{
    width: 100%;
  }
  .aboutSec .flexbox .right{
    width: 100%;
  }
  .osusume h2{
    margin-bottom: 40px;
  }
  .right img{
    display: none;
  }
  .t_ring{
    width: 60%;
    margin: 80px auto;
  }
  .bottom{
    display: block;
    width: 60%;
    margin: 80px auto 0;
  }
  .sugiwara{
    width: 100%;
  }
  .bansyuu{
    width: 100%;
    margin-top: 80px;
  }
  .kita h2{
    margin-top: 40px;
    padding-top: 40px;
    background-position: calc(50% - 125px) calc(50% + 5px);
    background-size: 64px auto;
  }
  .tizu{
    margin: 20px auto 25px;
  }
  .tizu img{
    display: none;
  }
  .point .a{
    width: 80%;
  }
  .point p {
    padding: 0;
    font-size: 14px;
    border: none;
  }
  .tizu p{
    width: 100%;
  }
  .tizu .taka_p{
    background: url(../../about/images/taka_botan.webp) no-repeat;
    background-size: cover;
  }
  .tizu .kasai_p{
    background: url(../../about/images/kasai_botan.webp) no-repeat;
    background-size: cover;
  }
  .tizu .ono_p{
    background: url(../../about/images/ono_botan.webp) no-repeat;
    background-size: cover;
  }
  .tizu .nishiwaki_p{
    background: url(../../about/images/nishiwaki_botan.webp) no-repeat;
    background-size: cover;
  }
  .tizu .kato_p{
    background: url(../../about/images/kato_botan.webp) no-repeat;
    background-size: cover;
  }
  .tizu .miki_p{
    background: url(../../about/images/miki_botan.webp) no-repeat;
    background-size: cover;
  }
  .top_about {
    margin-top: 0;
  }
  .s_photo{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
  }
  .s_photo .photo {
    width: 23%;
    margin: 20px 0;
  }
  .taberu h3{
    font-size: 23px;
  }
  .taberu::before {
    background-size: 35px auto;
    transform: translateX(-180px);
    top: -65px;
    width: 35px;
    height: 65px;
  }
  .taberu::after {
    background-size: 35px auto;
    transform: translateX(145px);
    top: -55px;
    width: 35px;
    height: 65px;
}
  .project_content{
    width: 95%;
  }
  .project_img {
    margin-top: 20px;
  }
  .project_img img {
    width: 48%;
    height: auto;
    object-fit: cover;
  }
  .torikumi h2 {
    background-position: calc(50% - 140px) calc(50% + 5px);
  }
  .eatin h2{
    background-position: calc(50% - 140px) calc(50% + 5px);
    background-size: 60px auto;
  }
  .insta h2 {
    background: url(../images/maru4.webp) no-repeat center;
    background-position: calc(50% - 65px) calc(50% + 5px);
    background-size: 64px;
  }
  .insta a{
    width: 450px;
  }
    .insta .insta_id .insta_img{
    width: 25px;
  }
  .insta .insta_id {
    width: 100%;
    font-size: 14px;
  }
/* Instagramのレスポンシブ対応が出来るまでの応急処置 */
  .insta .content iframe{
    height: 150px !important;
  }
}

/* スマホ2 */
@media screen and (max-width: 500px) {
  .aboutSec .flexbox .left p {
    padding: 0 15px;
  }
  .s_recsec2{
    width: 70%;
  }
  .insta a{
    width: 340px;
  }
  .insta .content iframe {
    height: 115px !important;
  }
  .insta .insta_id{
    padding: 15px 0;
    margin-top: 20px;
  }
  .insta .insta_id  a{
    width: 60%;
  }
}