@charset "utf-8";

html, body {
overflow-x: hidden;
overflow-y: auto;
margin: 0;
padding: 0;
font-family: 'Lato', 'Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;

}
*, *::before, *::after{
box-sizing:inherit;
}
a{
text-decoration: none;
}
 /* TOP画像 */
.smartphone-opening{
  width: 100%;
  margin: 0 auto;
}
.smartphone-opening_1 {
  width: 100%;
}

.smartphone-opening img{
  width: 100%;
  height: 150vh;
  object-fit: cover;
  object-position: center;
} 

/* キャッチフレーズ */
.Catchphrase {
  width: 100%;
  margin: 0 auto;
}

.Catchphrase_1 img {
  position: absolute;
  top: 30%;
  width: 60%; /* ここを調整して画像を小さくします。 */
  max-width: 300px; /* 最大幅を指定（必要に応じて変更） */
  height: auto; /* 高さを自動に設定 */
  display: block;
  left: 50%; /* 左から中央に配置 */
  transform: translateX(-50%); /* 中央に移動 */
}
.Catchphrase_1 h1 {
  width: 92%;
  margin: 0 auto;
  color: #ffffff;
  position: absolute;
  max-width: 350px;
  left: 50%; /* 中央に設定 */
  transform: translateX(-50%); /* 中央に配置 */
  text-shadow: 1px 1px 2px #000000;
  top: 50%;
  font-weight: bold;
  letter-spacing: 0.2em;
  font-size: 1.1rem;
  line-height: 1.6;
  text-align: center;
}

.Catchphrase_1 .greetings-title {
  width: 90%;
  margin: 0 auto;
  color: #000000;
  position: absolute;
  max-width: 350px;
  top: 75%; /* ご挨拶の位置を調整 */
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  font-size: 1.2rem;
  font-weight: bold;
}

.Catchphrase_1 p {
  width: 90%;
  margin: 0 auto;
  color: #000000;
  position: absolute;
  max-width: 350px;
  top: 85%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.6;
}
.Catchphrase_1 p strong {
  display: block; /* ブロック要素化 */
  text-align: right; /* 右寄せ */
  position: absolute; /* 位置を直接指定 */
  right: 5%; /* 右側からの余白を調整 */
  bottom: 5%; /* 下からの距離を調整（上に上げたい分だけ減らす） */
  font-size: 1rem; /* フォントサイズ調整 */
}
/* ロゴが転がってくるアニメーション */
@keyframes rollIn {
  0% {
    opacity: 0;
    transform: translateX(-100%) rotate(-360deg); /* 左側から回転しながら登場 */
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) rotate(0deg); /* 中央で停止 */
  }
}


.logo {
  animation: rollIn 2s ease-out;
}

/* タブレット */
@media screen and (min-width: 768px) {
  .Catchphrase_1 img {
    top: 30%;
     width: 50%;
     max-width: 275px;
  }

  .Catchphrase_1 h1 {
    width: 80%; /* 幅を広げる */
    margin: 0 auto;
    color: #ffffff;
    position: absolute;
    max-width: 700px; /* 最大幅を拡大 */
    left: 50%;
    transform: translateX(-50%);
    text-shadow: 1px 1px 2px #000000;
    top: 50%;
    font-weight: bold;
    letter-spacing: 0.1em; /* 文字間を調整 */
    font-size: 1rem; /* フォントサイズを大きく */
    line-height: 2; /* 行間を調整 */
    text-align: center;
  }
  
  .Catchphrase_1 .greetings-title {
    width: 80%; /* 幅を広げる */
    margin: 0 auto;
    color: #000000;
    position: absolute;
    max-width: 600px; /* 最大幅を拡大 */
    top: 75%; /* 位置を調整 */
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-size: 1.5rem; /* フォントサイズを大きく */
    font-weight: bold;
  }
  
  .Catchphrase_1 .greetings {
    width: 80%; /* 幅を広げる */
    margin: 0 auto;
    color: #000000;
    position: absolute;
    max-width: 600px; /* 最大幅を拡大 */
    top: 85%; /* 位置を調整 */
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-size: 1.2rem; /* フォントサイズを大きく */
    line-height: 1.8; /* 行間を調整 */
  }
}
/* .Catchphrase_1 p {
  font-family: "Oswald", sans-serif;
  top: 50%;
  letter-spacing: 0.1em;
  font-size: 20px;
  font-weight: bold;
} */
/* 下にスクロールダウン */
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400&display=swap');

.scroll_down{
  position:absolute;
  bottom:1%;
  right:50%;
  animation:arrowmove 2s ease-in-out infinite; 
}

.scroll_down a{
  position: absolute;
  left: -24px;
  bottom: 120px;
  color: #ffffff;
  font-size: 7px;
  font-weight: bold;
  font-family: 'Josefin Sans', sans-serif;
  letter-spacing: .2em;
  writing-mode: vertical-rl;
  text-decoration: none;
  text-transform: uppercase;
}

.scroll_down:before {
    content: "";
    position: absolute;
    bottom: 120px;
    right: -6px;
    width: 2px;
    height: 20px;
    background: #ffffff;
    transform: skewX(-31deg);
}

.scroll_down:after{
  content: "";
  position: absolute;
  bottom: 120px;
  right: 0;
  width: 2px;
  height: 60px;
  background: #ffffff;
}

@keyframes arrowmove{
0%{bottom:1%;}
50%{bottom:5%;}
00%{bottom:1%;}
}

/* Newsページ */

.news {
  width: 100%;
  margin: 0 auto;
  background-color: #ffed0045;
  background-image: linear-gradient(291deg, #f5ca9b59 50%, #00000000 50%)
}

.news_1 {
  width: 100%;
  margin: 0 auto;
  padding-bottom: 10px;
  position: relative; /* 親要素にrelativeを設定 */
}

/* ニュース画像スタイル */
.news_image {
  background-image: url(../image/line.png);
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  z-index: 1;
  padding-top: 43%; /* アスペクト比16:9に基づくバランス調整 */
  opacity: 0; /* 初期状態は透明 */
  transform: translateX(-100px); /* 初期位置は左に隠す */
  transition: opacity 1s ease, transform 1s ease;
}

.news_image.show {
  opacity: 1; /* 表示状態 */
  transform: translateX(0); /* 元の位置に戻す */
}

/* 見出しスタイル */
.news_1 h2 {
  width: 100%;
  text-align: center;
  font-family: "Oswald", sans-serif;
  letter-spacing: 0.12em;
  font-size: 3rem;
  font-weight: bold;
  background: linear-gradient(to bottom, #FFEB3B, #ff0000);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  position: relative;
  top: -30px;
  opacity: 0; /* 初期状態は透明 */
  transform: translateX(100%); 
  transition: opacity 2s ease, transform 2s ease;
}

.news_1 h2.show {
  opacity: 1; /* 表示状態 */
  transform: translateX(0); /* 元の位置に戻す */
}

/* お知らせのスタイル */
.news_1 h2::after {
  content: "お知らせ";
  display: block;
  font-size: 1rem;
  text-align: center;
  background: linear-gradient(to bottom, #FFEB3B, #ff0000);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0; /* 初期状態は透明 */
  transform: translateX(100%);
  transition: opacity 2s ease, transform 2s ease;
}

.news_1 h2.show::after {
  opacity: 1; /* 表示状態 */
  transform: translateX(0); /* 元の位置に戻す */
}

/* アニメーションの定義 */
@keyframes fadeInFromLeft {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInFromRight {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* アニメーション適用 */
.show .news_image
.show .catering_image
.show .license {
  animation: fadeInFromLeft 1.5s ease-in-out forwards; /* ニュース画像のアニメーション */
}

.show .news_1 h2
.show .catering_1 h2
.show .license_1 h2  {
  animation: fadeInFromLeft 2s ease-in-out forwards; /* 見出しのアニメーション */
}

.show .news_1 h2::after
.show .catering_1 h2::after
.show .license_1 h2::after {
  animation: fadeInFromRight 2s ease-in-out forwards; /* お知らせのアニメーション */
  animation-delay: 0.5s; /* 少し遅らせて表示 */
}



/* ニュース　画像スライダー */
.section {
  max-width: 600px;
  margin: 0 auto;
  padding: 30px 0;
}

/* メインスライダーのスタイル */
.slider_thumb {
  display: flex;            
  align-items: center;      
  justify-content: center;  
}

/* メイン画像のスタイル */
.slider_thumb img {
  width: 90%;               
  height: auto;             
  max-height: 250px;        
  object-fit: contain;      
  margin: 0 auto;           
}

/* 縦画像のスタイル */
.slider_thumb img.vertical {
  max-height: 200px;        
}

/* 横画像のスタイル */
.slider_thumb img.horizontal {
  max-height: 100px;        
}

/* サムネイルの画像エリア */
.thumb {
  margin: 20px 0 0;
  display: flex;
  justify-content: center;  
  align-items: center;      
}

/* サムネイルの画像スタイル */
.thumb img {
  width: 90%;               
  height: auto;             
  max-height: 40px;         
  object-fit: contain;      
  margin: 0 auto;           
}

/* サムネイルの縦画像 */
.thumb img.vertical {
  max-height: 40px;         
}

/* サムネイルの横画像 */
.thumb img.horizontal {
  max-height: 20px;         
}

/* スライダー全体のスタイル */
.sliderArea {
  position: relative;          /* 相対位置を設定 */
  max-width: 90%;             /* スライダーの幅を90%に設定 */
  margin: 0 auto;             /* 中央揃え */
  padding: 0 25px;
}

/* 各スライドのスタイル */
.slick-slide {
  margin: 0 5px;
  transition: all ease-in-out 0.3s;
  opacity: 0.2;
}

.slick-slide img {
  width: 100%;
  height: auto;
}

.slick-active, .slick-current {
  opacity: 1;
}

/* ナビゲーション矢印のスタイル */
.slick-prev, .slick-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  width: 40px;
  height: 40px;
  background-color: #f4cfa0b8;
  border-radius: 40%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* テキストを非表示 */
.slick-prev:before, .slick-next:before {
  display: none; 
}

/* 矢印の形状を定義 */
.slick-prev::after, .slick-next::after {
  content: '';
  display: block;             /* ブロック要素として表示 */
  width: 0;                   /* 幅を0に設定 */
  height: 0;                  /* 高さを0に設定 */
}

/* 矢印の回転 */
.slick-prev::after {
  transform: rotate(135deg); /* 左矢印 */
}

.slick-next::after {
  transform: rotate(-45deg); /* 右矢印 */
}

/* 矢印の位置調整 */
.slick-prev {
  left: 10px; /* 左矢印の位置 */
}

.slick-next {
  right: 10px; /* 右矢印の位置 */
}

/* サムネイルスライダーのナビゲーション矢印を非表示にする */
.thumb .slick-prev,
.thumb .slick-next {
  display: none !important; /* 矢印を強制的に非表示にする */
}
/* お知らせ更新情報 */
.company-sp  section{
  font-size:10px;
  margin:0 auto;
  width: 95%;
  color: rgb(0, 0, 0);
} 

section.pany-sp dl{
  border-top: 1px solid #c8c8c8;
  display: table;
  width:100%;
}

section.pany-sp dl:last-child{
  border-bottom: 1px solid #c2bfbf;
}

section.pany-sp dl dt,
section.pany-sp dl dd{
  display: table-cell;
  padding:15px 0;
  vertical-align: top;
}
section.pany-sp dl dt{
  width:20%;
  text-align:left;
}
section.pany-sp dl dd{
  width: 80%;
}
section.pany-sp dl dd a{
  color:rgb(29, 29, 29);
  letter-spacing :1.5px;
}
/* 地球の画像 */
.Earth img {
  width: 93%;
  opacity: 0.2;
  position: absolute;
  top: 12px;
  left: -88px;
  filter: grayscale(100%);
}





/* 写真一覧 */
/* Photoページ */
.photo {
  width: 100%;
  margin: 0 auto;
}

.photo_1 {
  width: 100%;
  margin: 0 auto;
  position: relative;
}

.photo_image {
  background-image: url(../image/line-2.png);
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  z-index: 1;
  padding-top: 43%;
  opacity: 0;
  transform: translateX(100px); /* 初期位置を右に設定 */
  transition: opacity 1s ease, transform 1s ease;
}

.photo_image.show {
  opacity: 1;
  transform: translateX(0); /* 元の位置に戻す */
}

.photo_1 h2 {
  width: 100%;
  text-align: center;
  font-family: "Oswald", sans-serif;
  letter-spacing: 0.12em;
  font-size: 3rem;
  font-weight: bold;
  background: linear-gradient(to bottom, #FFEB3B, #ff0000);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  position: relative;
  top: -30px;
  opacity: 0;
  transform: translateX(-100%); /* 初期位置を左に設定 */
  transition: opacity 2s ease, transform 2s ease;
}

.photo_1 h2.show {
  opacity: 1;
  transform: translateX(0); /* 元の位置に戻す */
}

.photo_1 h2::after {
  content: "画像一覧";
  display: block;
  font-size: 1rem;
  text-align: center;
  background: linear-gradient(to bottom, #FFEB3B, #ff0000);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0;
  transform: translateX(-100%);
  transition: opacity 2s ease, transform 2s ease;
}

.photo_1 h2::before {
  content: "過去実績1部紹介";
  display: block;
  font-size: 0.8rem;
  text-align: center;
  background: linear-gradient(to bottom, #ff673b, #ff0000);  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  position: absolute;
  top: 6.5rem; /* 「画像一覧」の下に配置 */
  left: 0;
  right: 0;
  opacity: 0;
  transform: translateX(-100%);
  transition: opacity 2s ease, transform 2s ease;
}

/* アクティブ時のアニメーション制御 */
.photo_1 h2:hover::after,
.photo_1 h2:hover::before {
  opacity: 1;
  transform: translateX(0);
}

.photo_1 h2.show::after,
.photo_1 h2.show::before {
  opacity: 1;
  transform: translateX(0);
}

/* Photo見出しの下に50pxスペース */
.photo_1 h2 {
  margin-bottom: 50px;
}

/* スライダーの画像スタイル */
#key_visual {
  width: 100%;
  margin: 0 auto 60px;
}

.your-class div {
  text-align: center;
}

.your-class img {
  width: 90%; /* 画像の幅を90%に設定して、中央に配置 */
  height: auto;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(3px 3px 5px #757575);
  -webkit-filter: drop-shadow(4px 4px 6px #8f8e8e);

}
.photo_1 p{
  width: 90%;
  margin: 0 auto;
  margin-bottom: 80px;
  font-size: 0.8rem;
}

/* おしゃれなインジゲーター */
.slick-dots {
  bottom: -30px; /* インジゲーターの位置 */
  display: flex; /* フレックスボックスを使用 */
  justify-content: center; /* 中央揃え */
  padding: 0; /* パディングをリセット */
  margin: 0; /* マージンをリセット */
}

.slick-dots li {
  width: 10px; /* 非アクティブ状態の幅 */
  height: 10px; /* 非アクティブ状態の高さ */
  margin: 0 10px; /* ドット間のスペースを広げる */
}

.slick-dots li button {
  font-size: 0; /* ボタンのテキストを非表示 */
  width: 15px; /* ボタンの幅 */
  height: 15px; /* ボタンの高さ */
  border-radius: 50%; /* 丸くする */
  transition: background 0.3s, transform 0.3s; /* アニメーション効果 */
  transform: scale(0.6); /* 非表示時は小さく */
}

.slick-dots li.slick-active button {
  background: #ffb52d63; /* アクティブ状態の色（オレンジ） */
  transform: scale(1.0); /* アクティブ状態でさらに大きく */
}

/* ケータリング事業 */
.catering {
  width: 100%;
  margin: 0 auto;
  background-color: rgb(96 96 96);
  background-image: url(../image/catering.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-blend-mode: multiply;
}

.catering_1 {
  width: 100%;
  margin: 0 auto;
  padding-bottom: 10px;
}

.catering_image {
  background-image: url(../image/line.png);
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  z-index: 1;
  padding-top: 43%;
  opacity: 0;
  transform: translateX(-100px); /* 左から浮き出る */
  transition: opacity 1s ease, transform 1s ease;
}

.catering_image.show {
  opacity: 1;
  transform: translateX(0);
}

.catering_1 h2 {
  width: 100%;
  text-align: center;
  font-family: "Oswald", sans-serif;
  font-size: 1.5rem;
  font-weight: bold;
  /* background: linear-gradient(to bottom, #ff0000, #ffffff);  background-clip: text; */
  color: rgb(255, 255, 255);
  position: relative;
  top: 0;
  opacity: 0;
  transform: translateX(100%); /* 右から浮き出る */
  transition: opacity 2s ease, transform 2s ease;
}

.catering_1 h2.show {
  opacity: 1;
  transform: translateX(0);
}
.catering_1 h2::after {
  content: "イベント出店";
  display: block;
  font-size: 0.8rem;
  letter-spacing: 3px;
  text-align: center;
  /* background: linear-gradient(to bottom, #FFEB3B, #ff0000);
  -webkit-background-clip: text;
  background-clip: text; */
  color: whitesmoke;
  opacity: 0; /* 初期状態は透明 */
  transform: translateX(100%);
  transition: opacity 2s ease, transform 2s ease;
}

.catering_1 h2.show::after {
  opacity: 1; /* 表示状態 */
  transform: translateX(0); /* 元の位置に戻す */
}
.catering p{
  width: 90%;
  font-size: 0.9rem;
  color: #ffffff;
  margin: 0 auto;
  letter-spacing: 3px;
  line-height: 1.6;
  margin-top: 60px;
}

/* 店舗事業 */
.store-section {
  width: 100%;
  margin: 0 auto;
  background-color: rgb(96 96 96);
  background-image: url(../image2/contents/1624000012209.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-blend-mode: multiply;
}

.store-section_1 {
  width: 100%;
  margin: 0 auto;
  padding-bottom: 10px;
}

/* コラボカフェ事業 */
.store-section_image {
  background-image: url(../image/line-2.png);
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  z-index: 1;
  padding-top: 43%;
  opacity: 0; /* 初期状態は透明 */
  transform: translateX(100px); /* 右から浮き出る */
  transition: opacity 1s ease, transform 1s ease;
}

.store-section_image.show {
  opacity: 1;
  transform: translateX(0); /* 元の位置に戻す */
}

.store-section_1 h2 {
  width: 100%;
  text-align: center;
  font-family: "Oswald", sans-serif;
  font-size:1.5rem;
  font-weight: bold;
  color: rgb(255, 255, 255);
  position: relative;
  top: 0;
  opacity: 0; /* 初期状態は透明 */
  transform: translateX(-100%); /* 左から浮き出る */
  transition: opacity 2s ease, transform 2s ease;
}

.store-section_1 h2.show {
  opacity: 1;
  transform: translateX(0); /* 元の位置に戻す */
}

.store-section_1 h2::after {
  content: "マリオンクレープFC店舗運営";
  display: block;
  font-size: 0.8rem;
  letter-spacing: 3px;
  text-align: center;
  color: whitesmoke;
  opacity: 0; /* 初期状態は透明 */
  transform: translateX(-100%); /* 左から浮き出る */
  transition: opacity 2s ease, transform 2s ease;
}

.store-section_1 h2.show::after {
  opacity: 1; /* 表示状態 */
  transform: translateX(0); /* 元の位置に戻す */
}

.store-section p {
  width: 90%;
  font-size: 0.9rem;
  color: #ffffff;
  margin: 0 auto;
  letter-spacing: 3px;
  line-height: 1.6;
  margin-top: 60px;
}

/* ライセンス事業 */
.license {
  width: 100%;
  margin: 0 auto;
  background-color: rgb(96 96 96);
  background-image: url(../image/license\ .png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-blend-mode: multiply;
}

.license_1 {
  width: 100%;
  margin: 0 auto;
  padding-bottom: 10px;
}

.license_image {
  background-image: url(../image/line.png);
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  z-index: 1;
  padding-top: 43%;
  opacity: 0;
  transform: translateX(-100px); /* 左から浮き出る */
  transition: opacity 1s ease, transform 1s ease;
}

.license_image.show {
  opacity: 1;
  transform: translateX(0);
}

.license_1 h2 {
  width: 100%;
  text-align: center;
  font-family: "Oswald", sans-serif;
  font-size:1.5rem;
  font-weight: bold;
  /* background: linear-gradient(to bottom, #ff0000, #ffffff);  background-clip: text; */
  color: rgb(255, 255, 255);
  position: relative;
  top: 0;
  opacity: 0;
  transform: translateX(100%); /* 右から浮き出る */
  transition: opacity 2s ease, transform 2s ease;
}

.license_1 h2.show {
  opacity: 1;
  transform: translateX(0);
}
.license_1 h2::after {
  content: "ライセンス商品の製造・卸・OEM受注";
  display: block;
  font-size: 0.8rem;
  letter-spacing: 3px;
  text-align: center;
  /* background: linear-gradient(to bottom, #FFEB3B, #ff0000);
  -webkit-background-clip: text;
  background-clip: text; */
  color: whitesmoke;
  opacity: 0; /* 初期状態は透明 */
  transform: translateX(100%);
  transition: opacity 2s ease, transform 2s ease;
}

.license_1 h2.show::after {
  opacity: 1; /* 表示状態 */
  transform: translateX(0); /* 元の位置に戻す */
}
.license p{
  width: 90%;
  font-size: 0.9rem;
  color: #ffffff;
  margin: 0 auto;
  letter-spacing: 3px;
  line-height: 1.6;
  margin: 60px auto;
}

/* 多様なサービス */



.business-container {
  position: relative; /* 擬似要素を配置するために必要 */
  width: 100%;
  margin: 0 auto;
  text-align: center; /* テキストを中央揃え */
  z-index: 1; /* テキストが前面に表示されるように */
}

.business-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../image/758937449.png);
  background-size: cover;
  background-position: left;
  opacity: 0.5; /* 背景画像の透明度 */
  z-index: -1; /* 背景として配置 */
}
.business-container_2 {
  position: relative; /* これが必要 */
  overflow: hidden; /* 画像がはみ出さないようにする */
}


.business-title {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 35px;
  color: #333;
  padding-top: 63px;
  position: relative;
}
.business-title::after {
  content: "";
  display: block;
  width: 75%;
  height: 15px;
  background: linear-gradient(to right, #ffeb3b80 10%, #ff5722bd 90%);
  margin: -16px auto 0;
  border-radius: 3px;
}


.business-description {
  font-size: 1rem; /* 説明文のサイズ */
  color: #555;
  margin:0 auto 60px;
  width: 90%;
  letter-spacing: 2px;
  line-height: 1.6;

  }
.services {
  width: 100%;
  display: flex; /* フレックスボックスで横並び */
  flex-wrap: wrap; /* 行を折り返す */
  justify-content: center; /* 中央揃え */
}
.service-item-rice,
.service-item-web,
.service-item-kitchen,
.service-item-cleaning,
.service-item-construction,
.service-item-communication-device {
  text-align: center;
  margin: 80px auto;
  position: relative; /* 親要素に相対配置 */
}

/* お米コンサルティング */
.service-item-rice h3, 
.service-item-web h3, 
.service-item-kitchen h3, 
.service-item-cleaning h3, 
.service-item-construction h3, 
.service-item-communication-device h3 {
    position: absolute; /* 絶対配置 */
    top: -60px; /* 位置を調整 */
    left: 3%;
    margin: 0; /* 余白をリセット */
    padding: 10px 20px; /* 左右に余白を追加 */
    line-height: 2; /* 行間を設定 */
    font-weight: bold;
    font-size: 1.3rem;
    color: black; /* 文字色を黒に設定 */
    letter-spacing: 1px;
    z-index: 1;
}

.service-item-rice h3::before {
  content: "Rice Consulting Business";
  display: block;
  position: absolute;
  width: 100%;
  top: calc(100% + -20px);
  left: 3%;
  margin: 0;
  padding: 5px 20px;
  font-weight: bold;
  font-size: 0.8rem;
  color: #1565C0;
  letter-spacing: 1px;
  z-index: 0;
}

.service-item-web h3::before {
    content: "Web Development Services"; /* 前に表示する内容 */
    display: block;
    position: absolute;
    top: calc(100% + -20px); /* h3の下に配置 */
    left: 3%;
    margin: 0;
    padding: 5px 20px;
    font-weight: bold;
    font-size: 0.8rem;
    color: #1565C0;
    letter-spacing: 1px;
    white-space: nowrap; /* テキストを1列にする */
    z-index: 0;
}

.service-item-kitchen h3::before{
  content: "Kitchen Equipment Wholesale";
  display: block;
  position: absolute;
  top: calc(100% + -20px);
  left: 3%;
  margin: 0;
  padding: 5px 20px;
  font-weight: bold;
  font-size: 0.8rem;
  color: #1565C0;
  letter-spacing: 1px;
  white-space: nowrap;
  z-index: 0;
}

.service-item-cleaning h3::before{
  content: "Cleaning Services Business";
  display: block;
  position: absolute;
  top: calc(100% + -20px);
  left: 3%;
  margin: 0;
  padding: 5px 20px;
  font-weight: bold;
  font-size: 0.8rem;
  color: #1565C0;
  letter-spacing: 1px;
  white-space: nowrap;
  z-index: 0;
}

.service-item-construction h3::before {
  content: "Renovation Services";
  display: block;
  position: absolute;
  top: calc(100% + -20px);
  left: 3%;
  margin: 0;
  padding: 5px 20px;
  font-weight: bold;
  font-size: 0.8rem;
  color: #1565C0;
  letter-spacing: 1px;
  white-space: nowrap;
  z-index: 0;
}

.service-item-communication-device h3::before {
  content: "Telecom Equipment Sales";
  display: block;
  position: absolute;
  top: calc(100% + -20px);
  left: 3%;
  margin: 0;
  padding: 5px 20px;
  font-weight: bold;
  font-size: 0.8rem;
  color: #1565C0;
  letter-spacing: 1px;
  white-space: nowrap;
  z-index: 0;
}

/* .service-item-rice::before {
  content: "";
  position: absolute;
  right: 0;
  background-image: url(../image/522786.png);
  top: -105px;
  border-radius: 50px;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.2;
} */
/* web制作 */
/* .service-item-web::before {
  content: "";
  position: absolute;
  left: -84px;
  background-image: url(../image/network-6088553_1920.jpg);
  top: -124px;
  border-radius: 50%;
  width: 200px;
  height: 200px;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.1;
} */
.service-item-kitchen::before {
  content: "";
  position: absolute;
  left: 0;
  background-image: url(../image/890849038.svg);
  top: -124px;
  border-radius: 50%;
  width: 200px;
  height: 200px;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.1;
  transform: translateX(-50%) scaleX(1.5); /* 横に1.5倍引き伸ばす */
}
.service-image {
  width: 55%;
  height: auto;
  margin: 20px 0 ;
  max-width: 300px;
  border-radius: 10px;
  box-shadow: 9px 5px 11px 1px #0000004a;
  z-index: 1;
}
.services p{
  width: 90%;
  margin: 30px auto 0;
  font-size: 0.9rem;
  text-align: left;
}
.Various-container,
.angled-services{
  display: none;
}
 /* 一緒に働きませんか */
 .works{
  width: 100%;
  margin: 0 auto;
  position: relative;
  margin-bottom: 35px;
}

.works_1 img{
  height: 65vh;
}
.works_1 h2{
  position:absolute;
  top: 20%;
  left: 0;
  right: 0;
  font-size: 23px;
  font-weight: bold;
  text-align: center;
}
.works_1 p{
  position:absolute;
  top: 45%;
  left: 0;
  right: 0;
  font-size: 16px;
  text-align: center;
  color: #000000;
}
.button_1 p {
  position: absolute;
  width: 60%;
  left: 0;
  right: 0;
  top: 85%;
  font-size: 16px;
  text-align: center;
  color: aliceblue;
  letter-spacing: 0.12em;
  margin: 0 auto;
  background: linear-gradient(186deg, #ffa516, #fdd835b8);
  padding: 10px 20px;
  display: block;
  border-radius: 40px;
}




@keyframes slideIn {
  0% {
    transform: translate(-50px, 0); /* 左から移動 */
    opacity: 0; /* 初期状態は透明 */
  }
  100% {
    transform: translate(0, 0); /* 元の位置に */
    opacity: 1; /* 最終的に不透明 */
  }
}



/* コラボカフェ事業 */
.event-records {
  margin: 0 auto;
  padding: 40px 0; /* 全体に上下の余白を追加 */
}

.event-records h2 {
  font-size: 2rem;
  margin: 0 0 30px 0;
  font-weight: bold;
  text-align: center;
  padding: 20px 0; /* 見出しの上下に余白を追加 */
  /* 背景画像を設定 */
  background-image: url(../image/line.png); /* 背景画像の指定 */
  background-repeat: no-repeat; /* 画像を繰り返さない */
  background-position: center; /* 画像を中央に配置 */
  background-size: 100% 170%; /* 画像を横幅いっぱいに引き伸ばす */
}

.record-item {
  display: flex;
  flex-direction: column; /* スマホ用では縦並びに変更 */
  width: 85%;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 20px;
  border: 1px solid rgba(0, 0, 0, 0.331);
  padding: 30px 15px;
  margin: 0 auto;
  margin-bottom: 60px;
}

.record-text {
  flex: 1;
  line-height: 1.5;
}

.record-text p {
  background-color: #ffa700c2;
  padding: 5px 15px;
  border-radius: 5px;
  display: inline-block;
  font-weight: bold;
  margin-bottom: 20px;
  font-size: 1rem;
}
.custom-list li {
  list-style: none; /* デフォルトのリストマーカーを無効化 */
  position: relative; /* 疑似要素用に位置を相対指定 */
  padding-left: 20px; /* マーカーとテキストの間隔調整 */
  margin-bottom: 10px;
}

.custom-list li::before {
  content: "・"; /* 「・」を追加 */
  position: absolute; /* テキストの前に固定位置で配置 */
  left: 0; /* 左端に配置 */
  color: #333; /* 必要に応じて色を変更 */
  font-size: 1rem; /* サイズ調整 */
}

.record-image {
  flex: 1;
  text-align: center;
  width: 100%;
  height: auto;
}

.record-image img {
  width: 100%; /* 親要素の幅いっぱいに広げる */
  height: auto; /* アスペクト比を保つ */
  object-fit: cover; /* 必要に応じて画像をトリミング */
}


/* マリオンクレープ店舗運営 */
/* 店舗情報 */
.shop-item {
  display: flex;
  flex-direction: column; /* スマホ用では縦並びに変更 */
  width: 85%;
  flex-wrap: wrap;
  gap: 20px;
  border: 1px solid rgba(0, 0, 0, 0.331);
  padding: 30px 15px;
  margin: 0 auto;
  margin-bottom: 60px;
}

.shop-text {
  font-size: 16px;
  line-height: 1.5;
  text-align: left; /* テキストを左揃え */
  margin-bottom: 15px; /* テキストと画像の間に余白 */
}

.shop-text p {
  font-weight: bold;
  font-size: 1.1rem;
  margin-bottom: 10px;
}

.shop-text ul.shop-list {
  padding-left: 0; /* 左のインデントを削除 */
  list-style-type: none; /* ・を非表示にする */
  text-align: left;
}

.shop-text ul.shop-list li {
  margin-bottom: 5px;
}

.shop-image {
  width: 100%; /* 画像を画面幅に合わせる */
  text-align: center; /* 画像を中央に配置 */
}

.shop-image img {
  width: 100%;
  height: auto;
  max-width: 100%; /* 画像のサイズを画面に合わせて調整 */
  border-radius: 8px; /* 角丸 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 画像に影をつける */
}


/* ライセンス事業 */

/* ライセンス商品セクション */
.license-item {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding:30px 15px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  margin: 20px auto;
  width: 85%;
}

.license-text {
  font-size: 16px;
  line-height: 1.6;
}

.license-text p {
  margin-bottom: 15px;
}

.license-text strong {
  font-weight: bold;
}

.license-list {
  list-style: none;
  padding-left: 0;
  margin-bottom: 15px;
}

.license-list li {
  margin-bottom: 8px;
}

.highlight-text {
  color: #FF7F00; /* オレンジ色 */
  font-weight: bold;
}

/* ライセンス商品の注意書きセクション */
.license-notice {
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0 auto;
  margin-top: 30px;
  width: 90%;
}

.license-notice p {
  margin-bottom: 15px;
}

.license-notice strong {
  font-weight: bold;
}


/* ライセンス商品の紹介 */
.product {
  width: 90%;
  margin: 0 auto 40px; /* 下に40pxのマージンを追加 */
  padding: 20px 10px;
  border: 1px solid #00000029;
  background-color: #c9c9c91c;
border-radius: 5px;
}



.product-title {
  font-size: 17px;
  text-align: left;
  font-weight: bold;
  margin-bottom:20px;

}

.product-subtitle {
  font-size: 14px;
  color: #FF7F00; /* オレンジ色 */
  margin-bottom: 20px;
}

.product-image {
  text-align: center;
  margin-bottom: 20px;
}

.product-image img {
  width: 90%;
  height: auto;
}
.product-image_1 {
  text-align: center;
  margin-bottom: 20px;
}
.product-image_1 img {
  width: 30%;
  height: auto;
}

.product-details {
  margin-bottom: 20px;
}

.product-info {
  width: 100%;
  border-collapse: collapse;
}

.product-info td {
  padding: 6px;
  border: 1px solid #ddd;
}

.product-info .info-label {
  font-weight: bold;
  text-align: left;
  font-size: 12px;
}

.product-info .info-value {
  font-size: 10px;
  line-height: 1.8; /* 行間を広くして、上下に均等に配置 */
}

.jan-list {
  display: flex;
  flex-direction: column;
}

.jan-item {
  display: flex;
  justify-content: space-between; /* 名前と番号を左右に均等に配置 */
}

.jan-item span {
  display: block;
  width: 48%; /* 名前と番号に均等な幅を割り当て */
}

.jan-name {
  font-weight: normal; /* 太字を解除 */
  text-align: left;
}

.jan-number {
  font-weight: normal; /* 太字を解除 */
  text-align: right;
  font-size: 10px;
  color: #333;
}



/* 会社概要ページ */
.company_img {
  margin-top: 30px;
  padding-top: 70px; /* ヘッダーの高さに応じて調整 */
}

.company_img img {
  width: 80%;
  margin: 0 auto;
  display: block;
}

.greeting, .company-info {
  padding: 15px;
  background-color: #fff;
  margin-bottom: 20px;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.greeting h2 {
  font-size: 1.5rem;
  margin-bottom: 20px;
  margin-top: 20px;
  color: #616161;
  text-align: center;
  font-weight: bold;
}

.greeting p {
  font-size: 0.9rem;
  width: 95%;
  color: #000000;
  margin: 30px auto;
  line-height: 1.6;
}
.company-info h2{
  font-size: 1.5rem;
  margin-bottom: 20px;
  margin-top: 20px;
  color: #616161;
  text-align: center;
  font-weight: bold;
}
.company-info table {
  width: 100%;
  border-collapse: collapse;
}

.company-info th, .company-info td {
  padding: 10px;
  border: 1px solid #ddd;
  font-size: 12px;
  text-align: left;
}

.company-info th {
  background-color: #f2f2f2;
  font-weight: bold;
  width: 30%;
}

.company-info td {
  width: 70%;
}
.googlemap {
  width: 95%; /* 幅を調整 */
  margin: 20px auto; /* 上下に余白を追加し中央寄せ */
  display: block;
}

.googlemap iframe {
  width: 100%; /* 親要素の幅に合わせる */
  height: 250px; /* 固定高さ（必要に応じて変更可能） */
  border: 0;
}
/* メールフォーム */
.mail_form1{
  margin: 60px 0;
  }
  .mailimg img{
    margin: 70px 0 0 0;
  }
  .mail_form1 h2 {
    font-size: 1.3rem;
    background-color: #ffc10742;
    padding: 10px;
    width: 250px;
    margin: 0 auto;
    margin-bottom: 30px;
    border-radius: 5px;
    text-align: center;
  }
  .mail_form1 p{
    width: 95%;
    font-size: 1rem;
    margin: 0 auto;
    line-height: 1.6;
  }
  /* 必須項目の赤文字表示のスタイル */
.required-indicator {
  color: rgba(255, 68, 68, 0.827); /* 赤文字 */
  font-size: 0.5em; /* 少し小さめのフォントサイズ */
  margin-left: 5px; /* 余白を追加して項目の横に配置 */
}




/* ここからブログ記事 */
.news-heading {
  background-color: #ffffff; /* 明るい背景色を使用 */
  margin-top: 80px; /* トップ余白を少し減少させる */
  padding: 30px; /* 上下左右に広めの余白を追加 */
  text-align: center; /* 中央寄せ */
  border-bottom: 2px solid #f57c00; /* スリムな下線 */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* 初めから立体感を強調 */
  transition: box-shadow 0.3s ease-in-out; /* アニメーション効果 */
}
.news-heading p{
  text-align: left;
  margin-bottom: 10px;
  font-size: 10px;
  color: rgb(111, 50, 30);
  font-weight: bold;
  text-align: center;
}
.news-title {
  font-family: 'Helvetica Neue', sans-serif; /* シンプルでモダンなフォント */
  font-size: 2rem; /* 見出しの文字サイズを少し縮小 */
  color: #333; /* 落ち着いた文字色 */
  margin: 0; /* 余白を削除 */
  letter-spacing: 0.02em; /* 少しだけ字間を狭める */
  text-transform: none; /* 大文字表示はオフに */
  transition: color 0.3s ease-in-out; /* 色の変更にアニメーション効果を追加 */
}

.news-heading:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4); /* ホバー時の立体感を強める */
  color: #f57c00; /* 色変更にアニメーション効果を追加 */
}

.news-container {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 15px; /* カード間のスペース */
  font-family: 'Oswald', sans-serif;
  background-color: #f8f8f8;
  line-height: 1.6;
  padding: 20px;
  padding-top: 60px;
  margin-top: 40px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* 初めからふわふわ感を強調 */
}

.news-card {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* 立体感を強調 */
  padding: 20px 15px;
  text-align: left;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.news-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4); /* さらに立体感を強調 */
}

.news-date {
  font-size: 14px;
  color: #888888;
  margin-bottom: 8px;
  display: block;
}

.news-title {
  font-size: 1.2rem;
  color: #333333;
  text-decoration: none;
  transition: color 0.2s ease;
}



/* ここからブログページ１〜１３ページ */
.page{
  width: 100%;
  margin: 50px auto 20px;
}
.page_1,
.page_2,
.page_3{
  width: 90%;
  margin: 0 auto;
  padding-bottom: 70px;
  border-bottom: 1px dashed #000; /* 黒い太いダッシュ線 */
  border-bottom-width: 10px 30px; /* ダッシュの幅を長くし、間隔も広げる */
}
.page_1 h2,
.page_2 h2,
.page_3 h2 {
  font-size: 1rem;
  margin-bottom: 10px;
  color: #333;
  margin-top: 30px;
  line-height: 1.6;
}
.page_1 p{
  font-size: 0.9rem;
  padding: 2px 0 2px;
}
.page_2 p,
.page_3 p{
  font-size: 0.7rem;
  line-height: 1.6;
  margin-bottom: 10px;
}
.page_image{
  display: flex;
  width: 50%;
  margin-top: 50px;
}
.page_3 h3{
  font-size: 1rem;
  margin-bottom: 20px;
}
.team-section{
  padding-bottom: 50px;
  border-bottom: 1px dashed #0000006b; /* 黒い太いダッシュ線 */
  border-bottom-width: 10px 30px; /* ダッシュの幅を長くし、間隔も広げる */
}
.page_1 h3{
  font-weight: bold;
  margin: 30px auto 10px;
}
.page small{
  text-align: center;
  display: block;
  padding-top: 60px;
}
.mail_image{
  width: 100%;
  margin: 0 auto;
}
.mail_image img{
  margin: 150px auto 0;
  width: 80%;
  display: block;
}
.mail1_image img{
  margin: 150px auto 0;
  width: 20%;
  display: block;
}
/* タブレット */
@media screen and (min-width: 768px) {
  .scroll_down{
    position:absolute;
    bottom:1%;
    right:50%;
    animation:arrowmove 2s ease-in-out infinite; 
  }
  
  .scroll_down a{
    position: absolute;
    left: -24px;
    bottom: 180px;
    color: #ffffff;
    font-size: 7px;
    font-weight: bold;
    font-family: 'Josefin Sans', sans-serif;
    letter-spacing: .2em;
    writing-mode: vertical-rl;
    text-decoration: none;
    text-transform: uppercase;
  }
  
  .scroll_down:before {
      content: "";
      position: absolute;
      bottom: 180px;
      right: -6px;
      width: 2px;
      height: 20px;
      background: #ffffff;
      transform: skewX(-31deg);
  }
  
  .scroll_down:after{
    content: "";
    position: absolute;
    bottom: 180px;
    right: 0;
    width: 2px;
    height: 60px;
    background: #ffffff;
  }
  .news_1 h2,
.photo_1 h2{
  font-size: 3rem; /* 基本サイズ */
}
  .news_1 h2::after,
  .photo_1 h2::after {
  font-size: 1.6rem;
}
.slider_thumb img{
  max-width: 415px;
  max-height: 415px;
  margin-bottom: 40px;
}
.company-sp section{
  font-size: 1rem;
}
.photo_1 h2::before {
  content: "過去実績1部紹介";
  display: block;
  font-size: 1rem;
  text-align: center;
  background: linear-gradient(to bottom, #ff673b, #ff0000);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  position: absolute;
  top: 10.5rem;
  left: 0;
  right: 0;
  opacity: 0;
  transform: translateX(-100%);
  transition: opacity 2s ease, transform 2s ease;
}
.photo_1 p {
font-size: 1.3rem;
}
.catering_1 h2,
.store-section_1 h2,
.license_1 h2{
  font-size: 3rem;
}
.catering_1 h2::after,
.store-section_1 h2::after,
.license_1 h2::after {
  font-size: 1.2rem;
  margin-top: 20px;
}
.catering p,
.store-section_1 p,
.license_1 p{
  font-size: 1.5rem;
  margin: 100px auto 200px;
}
.business-title {
  font-size: 2.3rem;
  padding-top: 100px;
}
.business-description {
  font-size: 1.3rem;
}
.service-item-rice, .service-item-web, .service-item-kitchen, .service-item-cleaning, .service-item-construction, .service-item-communication-device {
  width: 100%;
}
.service-item-rice h3, .service-item-web h3, .service-item-kitchen h3, .service-item-cleaning h3, .service-item-construction h3, .service-item-communication-device h3 {
  font-size: 2rem;
}
.service-item-rice::after, .service-item-kitchen::after, .service-item-construction::after {
  content: "";
  position: absolute;
  left: 0;
  top: -27vh;
  width: 100%;
  height: 50vh;
  background-image: url(../image/line.png);
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0;
  z-index: 0;
  animation: slideIn 0.5s forwards;
}
.service-image {
  width: 60%;
  height: auto;
  margin: 80px 0;
  border-radius: 10px;
  box-shadow: 9px 5px 11px 1px #0000004a;
  z-index: 1;
  max-width: none;
}
.services p {
  width: 90%;
  margin: 30px auto 0;
  font-size: 1.2rem;
  text-align: left;
}
.service-item-web::after, .service-item-cleaning::after, .service-item-communication-device::after {
  content: "";
  position: absolute;
  left: 0;
  top: -25vh;
  width: 100%;
  height: 50vh;
  background-image: url(../image/line-2.png);
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0;
  animation: slideIn 0.5s forwards;
}
.works_1 img {
  height: 80vh;
}
.works_1 h2 {
  font-size: 2.5rem;
}
.works_1 p {
  position: absolute;
  top: 45%;
  left: 0;
  right: 0;
  font-size: 1.5rem;
  text-align: center;
  color: #000000;
  width: 90%;
  margin: 0 auto;
}

.button_1 p {
  position: absolute;
  width: 60%;
  left: 0;
  right: 0;
  font-weight: bold;
  top: 85%;
  font-size: 1.5rem;
  text-align: center;
  color: aliceblue;
  letter-spacing: 0.12em;
  margin: 0 auto;
  background: linear-gradient(186deg, #ffa516, #fdd835b8);
  padding: 20px 20px;
  display: block;
  border-radius: 40px;
}
.sns_footer{
  display: none;
}
a.gototop {
  background: #656565b0;
  bottom: 0;
  color: #ffffff;
  display: none;
  font-size: 5rem;
  height: 4.5rem;
  line-height: 6.3rem;
  position: fixed;
  right: 25px;
  text-align: center;
  margin-bottom: 85px;
  text-decoration: none;
  width: 5rem;
  z-index: 111111;
}
.footer {
  background-color: #fff;
  color: #333;
  padding-bottom: 10px;
  text-align: center;
  /* margin-bottom: 30px; */
}
.greeting p {
  font-size: 1rem;
  width: 80%;
  color: #000000;
  margin: 30px auto;
  line-height: 1.8;
}
/* お問い合わせページ */
.mailimg img {
  margin: 120px 0 0 0;
}
.mail_form1 h2 {
  font-size: 2rem;
  background-color: #ffc10742;
  padding: 20px;
  width: 450px;
  margin: 0 auto;
  margin-bottom: 50px;
  border-radius: 5px;
  text-align: center;
}
.mail_form1 p {
  width: 80%;
  font-size: 1.2rem;
  line-height: 1.6;
  margin: 0 auto;
}
.news-heading {
margin-top: 115px;
}
.news-card{
  padding: 30px;
}
.news-title{
  font-size: 1.2rem;
}
}
@media screen and (min-width: 1200px) {
   .scroll_down{
    position:absolute;
    bottom:1%;
    right:2%;
    animation:arrowmove 2s ease-in-out infinite; 
  }
  
  .scroll_down a{
    position: absolute;
    left: -24px;
    bottom: 50px;
    color: #ffffff;
    font-size: 10px;
    font-weight: bold;
    font-family: 'Josefin Sans', sans-serif;
    letter-spacing: .2em;
    writing-mode: vertical-rl;
    text-decoration: none;
    text-transform: uppercase;
  }
  
  .scroll_down:before {
      content: "";
      position: absolute;
      bottom: 50px;
      right: -6px;
      width: 2px;
      height: 20px;
      background: #ffffff;
      transform: skewX(-31deg);
  }
  
  .scroll_down:after{
    content: "";
    position: absolute;
    bottom: 50px;
    right: 0;
    width: 2px;
    height: 150px;
    background: #ffffff;
  }
  .sns_footer{
    display: none;
  }
  .burger {
    display: none; /* PCでは非表示 */
  }
  header{
    background-color: rgb(255, 255, 255);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.372);

  }
  .smartphone-opening img {
    width: 100%;
    height: 190vh;

}
  .pc_nav {
    display: block; /* PC用メニューを表示 */
    position: fixed;
    top: 0;
    right: 0;
    background: transparent; /* 背景を透明に */
    width: 100%;
    z-index: 999;
  }

  .pc_nav ul {
    display: flex;
    justify-content: flex-end; /* 右寄せ */
    margin: 0;
    padding:40px 30px;
    list-style: none;
  }

  .pc_nav li {
    margin: 30px 0;
}

.pc_nav li a {
  font-weight: bold;
  color: #000000;
  font-size: 14px;
  /* background: #FF5722; */
  border-right: 1px solid rgb(72 72 72 / 38%);
  padding: 15px;
  text-decoration: none;
  transition: color 0.3s;
  /* text-shadow: 1px 1px 2px #000000; */
}

  .pc_nav li a:hover {
    color: #ffa500; /* ホバー時にオレンジ色 */
  }

  .header_logo {
    position: fixed;
    top: 10px;
    left: 30px;
    z-index: 1000;
  }

  .header_logo img {
    width: 300px; /* ロゴのサイズ */
    height: auto;
  }
  .Catchphrase{
    width: 100%;
  }
  .Catchphrase_1{
    width: 100%;
  }
  .Catchphrase_1 img {
    position: absolute;
    top: 45%;
    max-width: 30%;
    height: auto;
    display: block;
    left: 50%;
    transform: translateX(-50%);
}
.Catchphrase_1 h1 {
 top: 80%;
 font-size: 1.8rem;
 max-width: 80%;
}
.Catchphrase_1 .greetings-title {
top: 110%;
  font-size: 2rem;
}
.Catchphrase_1 .greetings {
  max-width: 800px;
  top: 120%;
  font-size: 1.3rem;
}
.news {
  width: 100%;
  margin: 0 auto;
  background-color: #ffed0045;
  background-image: linear-gradient(307deg, #f5ca9b59 50%, #00000000 50%);
}
.section {
  max-width: 800px;
  margin: 0 auto;
  padding: 30px 0 70px 0;
}
.photo_1 p{
  width: 70%;
  margin-top: 100px;
}
.your-class img{
  width: 50%;
  height: auto;
}
.Earth img {
  width: 50%;
  opacity: 0.2;
  position: absolute;
  top: 150px;
  left: -88px;
  filter: grayscale(100%);
}
.news_1 h2 {
  width: 100%;
  text-align: center;
  font-family: "Oswald", sans-serif;
  letter-spacing: 0.12em;
  font-size: 3rem;
  font-weight: bold;
  background: linear-gradient(to bottom, #FFEB3B, #ff0000);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  position: relative;
  top: -72px;
  opacity: 0;
  transform: translateX(100%);
  transition: opacity 2s ease, transform 2s ease;
}
.company-sp section {
  width: 80%;
}
section.pany-sp dl dt {
  width: 20%;
  text-align: center;
}
.service-item-rice::after, .service-item-kitchen::after, .service-item-construction::after {
  content: "";
  position: absolute;
  left: 0;
  top: -41vh;
  width: 100%;
  height: 70vh;
  padding: 101px;
  background-image: url(../image/line.png);
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0;
  z-index: 0;
  animation: slideIn 0.5s forwards;
}
.catering p,
.store-section_1 p,
.license_1 p{
  width: 60%;
  margin: 100px auto 150px;
}
.catering_1 h2,
.store-section_1 h2,
.license_1 h2{
  font-size: 3rem;
  top: -50px;
}
.catering_1 h2::after,
.store-section_1 h2::after,
.license_1 h2::after {
  font-size: 1.2rem;
  margin-top: 20px;
}
.catering p,
.store-section_1 p,
.license_1 p{
  font-size: 1.5rem;
  margin: 100px auto 200px;
}
.service-item-web::after, .service-item-cleaning::after, .service-item-communication-device::after {
  display: none;
}
.service-item-rice::after, .service-item-kitchen::after, .service-item-construction::after{
  display: none;
}
.services p {
  width: 40%;
  /* margin: 30px auto 0; */
  font-size: 1.2rem;
  /* text-align: left; */
}
.service-image {
  width: 50%;
  padding: 10px;
}
.service-item-rice, .service-item-web, .service-item-kitchen, .service-item-cleaning, .service-item-construction, .service-item-communication-device {
  width: 100%;
  display: flex;
  align-items: center;
}
.business-container{
  display: none;
}
/* .service-item-rice h3, .service-item-web h3, .service-item-kitchen h3, .service-item-cleaning h3, .service-item-construction h3, .service-item-communication-device h3::after {
content: "";
background-color: #1565C0;
padding: 1000px;
} */
/* .business-services {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.business-item {
  display: flex;
  align-items: center;
  margin: 40px 0;
}

.business-image {
  flex: 1;
}

.business-image img {
  max-width: 100%;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.business-text {
  flex: 1;
  padding: 0 20px;
}

.business-item:nth-child(odd) .business-image {
  order: 1;
}

.business-item:nth-child(odd) .business-text {
  order: 2;
}

.business-item:nth-child(even) .business-image {
  order: 2;
}

.business-item:nth-child(even) .business-text {
  order: 1;
}
.business-text h2{
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
}
.business-text p{
  font-size: 1rem;
  padding: 20px;
} */
.Various-container,
.angled-services{
  display: block;
}

.angled-services {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 40px 20px; /* 上下の余白を強化 */
  margin: 20px 0; /* セクション間に余白を挿入 */
}


.angled-item.rice {
  background: url('../image/rice.png') no-repeat center center / cover;
}

.angled-item.web-development{
  background: url('../image/web.png') no-repeat center center / cover;
}

.angled-item.kitchen {
  background: url('../image/489745892393.png') no-repeat center center / cover;
}

.angled-item.cleaning {
  background: url('../image/848947.png') no-repeat center center / cover;
}

.angled-item.renovation {
  background: url('../image/9808083.png') no-repeat center center / cover;
}

.angled-item.communication {
  background: url('../image/5749373979.png') no-repeat center center / cover;
}
.angled-item {
  position: relative;
  overflow: hidden;
  height: 500px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.angled-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 107%;
  background: rgb(0 0 0 / 74%);
  transform: skewY(25deg);
  transform-origin: top;
  z-index: 1;
}

.angled-item .angled-content {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%); /* 中央に配置 */
  color: #fff;
  text-align: center;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5); /* テキストの影で可読性向上 */
  z-index: 2;
}

.angled-item .angled-content h2, .angled-item .angled-content h3 {
  position: absolute;
  left: 20px;
}

.angled-item .angled-content h3 {
  top: 112px;
  font-size: 16px;
  left: 80px;
  color: #008eff;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.angled-item .angled-content h2 {
  top: 56px;
  left: 60px;
  font-size: 28px;
  margin: 10px 0;
  font-weight: bold;
}

.angled-item .angled-content p {
  margin-top: 50px; /* 中央に配置 */
  font-size: 1.2rem;
  width: 80%; /* 画像いっぱいに広げる */
  line-height: 1.6;
  padding: 20px; /* 余白を調整 */
  position: relative;
  z-index: 2;
  text-align: center;
  margin-left: auto;  /* 横方向に中央揃え */
  margin-right: auto; /* 横方向に中央揃え */
}

.angled-link {
  display: inline-block;
  color: #ff5722;
  text-decoration: none;
  font-weight: bold;
  margin-top: 10px;
  background: #fff;
  padding: 8px 16px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.angled-link:hover {
  background: #ff5722;
  color: #fff;
}

/* 多彩なサービス */
.Various-container {
  width: 100%;
  margin: 0 auto;
  text-align: center; /* テキストを中央揃え */

}

.Various-container_2 {
  position: relative; /* これが必要 */
  overflow: hidden; /* 画像がはみ出さないようにする */
  margin: 100px auto;
}

.Various-title {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 35px;
  color: #333;
  padding-top: 63px;
  position: relative;
}
.Various-title::after {
  content: "";
  display: block;
  width: 30%;
  height: 15px;
  background: linear-gradient(to right, #ffeb3b80 10%, #ff5722bd 90%);
  margin: -16px auto 0;
  border-radius: 3px;
}


.Various-description {
  font-size: 1.1rem; /* 説明文のサイズ */
  color: #555;
  margin:0 auto 60px;
  width: 90%;
  letter-spacing: 2px;
  line-height: 1.6;
}
.works_1 img {
  height: 100vh;
  width: 100%;
}
    .works_1 p {
        width: 50%;
        margin: 0 auto;
    }
.footer-logo-img {
  max-width: 300px;
  height: auto;
  margin-top: 20px;
}

/*　コラボカフェ事業　*/
.record-item {
  flex-direction: row; /* 横並び */
  align-items: flex-start; /* 上揃え */
  width: 70%;
}

.record-text {
  flex: 1; /* テキスト部分の幅を調整 */
}

.record-image {
  flex: 0 0 300px; /* 画像部分の固定幅 */
  display: flex;
  justify-content: center; /* 画像を中央揃え */
  align-items: center;
}

.record-image img {
  max-width: 100%;
  height: auto;
}
/* 飲食店事業 */
.shop-item {
  flex-direction: row; /* 横並びに変更 */
  align-items: flex-start; /* 上揃え */
  justify-content: space-between; /* 要素間のスペースを均等配置 */
  gap: 30px; /* テキストと画像の間を広げる */
  width: 70%;
}

.shop-text {
  flex: 1; /* テキスト部分の幅を自動調整 */
}
.shop-text p {
  font-size: 1.3rem;
  margin-bottom: 20px;
}
.shop-text ul.shop-list li {
  margin-bottom: 5px;
  font-size: 1.2rem;
}
.shop-image {
  flex: 0 0 350px;
  text-align: center;
}

.shop-image img {
  max-width: 100%; /* 画像の最大幅を設定 */
  height: auto; /* 縦横比を維持 */
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
/* ライセンス事業 */
/* h2を中央揃え */
.event-records h2 {
  text-align: center;
  font-size: 3rem;
  margin-bottom: 20px;
  color: #333;
}

/* 横並び用コンテナ */
.license-container {
  display: flex; /* 横並び配置 */
  justify-content: space-between; /* 子要素間の均等配置 */
  gap: 20px; /* 子要素間のスペース */
  flex-wrap: wrap; /* 折り返し対応 */
  width: 80%;
  margin: 60px auto;
}

/* 子要素 */
.license-item {
  flex: 1; /* 各要素を均等に拡張 */
  max-width: 48%; /* 2列表示の幅調整 */
  background-color: #f9f9f9; /* 背景色 */
  padding: 15px; /* 内側余白 */
  border-radius: 8px; /* 角丸効果 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 軽い影 */
}

/* リストのスタイル */
.license-list {
  margin: 10px 0 0; /* 上部に余白 */
  padding: 0; /* 内側余白リセット */
  list-style: disc inside; /* ディスク型のリストアイコン */
}

/* 見出しの強調スタイル */
.license-item strong {
  font-size: 18px; /* フォントサイズ調整 */
  color: #333; /* 文字色 */
}
.license-notice {
  font-size: 1rem;
  line-height: 1.6;
  margin: 50px auto;
  width: 100%;
  text-align: left; /* 文字列を左寄せに変更 */
  display: flex;
  justify-content: flex-start; /* 左寄せに変更 */
  align-items: center;
  flex-direction: column;
}
.product {
  width: 65%;
}
.product-title {
  font-size: 1.2rem;
}
.product-subtitle {
  font-size: 1.1rem;
}
.product-image img {
  width: 83%;
}
.product-info .info-label {
  font-size: 1.1rem;
}
.product-info .info-value {
  font-size: 1rem;
}
.jan-number {
  font-size: 1rem;
}
.product-container {
  display: flex;
  flex-wrap: wrap;
  width: 95%;
  margin: 0 auto;
  gap: 20px; /* 適切な間隔を調整するためのオプション：セクション間の隙間 */
}

.product {
  flex: 1; /* 各セクションが同じスペースを占めます */
  max-width: calc(45% - 20px); /* 必要に応じて幅を調整します */
}
/* 会社概要 */
.greeting, .company-info {
  margin:0 auto;
  width: 70%;
}
.company-info th, .company-info td {
  font-size: 1.2rem;
  padding-left: 20px;
  line-height: 2;
}
.company-info th {
  background-color: #f2f2f2;
  font-weight: bold;
  width: 20%;
}
/* 問い合わせフォームページ */
.mailimg img {
  margin: 120px 0 0 0;
}
.mail_form1{
  width: 80%;
  margin:0 auto;
}
.mail_form1 h2 {
  font-size: 2rem;
width:  600px;
margin: 50px auto;
}
.mail_form1 p {
  font-size: 1.3rem;
}
.mailimg img {
  width: 80%;
  margin: 250px auto;
  display: block;
}

/* ここからブログ記事 */
.news-heading {
  width: 100%;
  background-color: #ffffff; /* 明るい背景色を使用 */
  padding:120px 0 30px; /* 上下左右に広めの余白を追加 */
  text-align: center; /* 中央寄せ */
  border-bottom: 2px solid #f57c00; /* スリムな下線 */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* 初めから立体感を強調 */
  transition: box-shadow 0.3s ease-in-out; /* アニメーション効果 */
}

.news-heading h1 {
  font-family: 'Helvetica Neue', sans-serif; /* シンプルでモダンなフォント */
  font-size: 3rem; /* 見出しの文字サイズを少し縮小 */
  color: #333; /* 落ち着いた文字色 */
  margin: 0; /* 余白を削除 */
  letter-spacing: 0.02em; /* 少しだけ字間を狭める */
  text-transform: none; /* 大文字表示はオフに */
  transition: color 0.3s ease-in-out; /* 色の変更にアニメーション効果を追加 */
}

.news-heading:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4); /* ホバー時の立体感を強める */
  color: #f57c00; /* 色変更にアニメーション効果を追加 */
}

.news-container {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 25px; /* カード間のスペース */
  font-family: 'Oswald', sans-serif;
  background-color: #f8f8f8;
  line-height: 1.6;
  padding: 20px;
  padding:100px 0 300px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* 初めからふわふわ感を強調 */
}

.news-card {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* 立体感を強調 */
  padding: 25px 15px;
  text-align: left;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  margin: 0 auto;
  width: 70%;
}


.news-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(119, 118, 118, 0.992); /* さらに立体感を強調 */
}

.news-date {
  font-size: 16px;
  color: #888888;
  margin-bottom: 8px;
  display: block;
}

.news-title {
  font-size: 1.3rem;
  color: #333333;
  text-decoration: none;
  transition: color 0.2s ease;
}
.news-title a {
  width: 100%;
}

.news-heading h1 {
  font-size: 2.5rem;
}
.page_1 p {
  font-size: 1.6rem;
  line-height: 1.6;
  margin:100px auto;
}
.page_3 img{
  max-width: 800px;
}
.page{
  width: 100%;
  margin: 50px auto 20px;
}
.page_1,
.page_2,
.page_3{
  width: 90%;
  margin: 0 auto;
  padding-bottom: 70px;
  border-bottom: 1px dashed #000; /* 黒い太いダッシュ線 */
  border-bottom-width: 10px 30px; /* ダッシュの幅を長くし、間隔も広げる */
}
.page_1 h2,
.page_2 h2,
.page_3 h2 {
  font-size: 2rem;
  margin-bottom: 10px;
  color: #333;
  margin-top: 30px;
  line-height: 1.6;
}
.page_1 p{
  font-size: 1.5rem;
}
.page_2 p,
.page_3 p{
  font-size: 0.7rem;
  line-height: 1.6;
  margin-bottom: 10px;
}
.page_image{
  display: flex;
  width: 50%;
  margin-top: 50px;
}
.page_3 h3{
  font-size: 1rem;
  margin-bottom: 20px;
}
.team-section{
  padding-bottom: 50px;
  border-bottom: 1px dashed #0000006b; /* 黒い太いダッシュ線 */
  border-bottom-width: 10px 30px; /* ダッシュの幅を長くし、間隔も広げる */
}
.page_2 h2,
.page_3 h3{
  font-size: 1.5rem;
  font-weight: bold;
}
.page_2 p,
.page_3 p{
  font-size: 1.2rem;
}
.page_3 h2{
  font-size: 1.5rem;
  font-weight: bold;
}
.page_1 h3{
  font-size: 2rem;
}
.event-details img{
  max-width:  300px;
  margin: 0 auto;
  display: block;
}
.mail1_image img{
  margin: 200px auto 100px ;
  width: 100px;
  display: block; 
}
.TOP_top {
  width: 300px;
  margin: 0 auto;
  text-align: center;
  border: 1px solid #00000014;
  padding: 15px;
  background-color: lch(47 92.52 36.82 / 0.09);
}
  }