@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:wght@400;700&display=swap');


/* リセットスタイル */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* 基本フォントと背景色 */
body {
    font-family: 'Arial', sans-serif;
    background-color: #f4f4f4;
    color: #333;
}

.light {
    color: gray;
}
.lightWhite {
    color: #EEE;
}

.subTitle {
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    margin-bottom: 0px;
}

/* sidemenu */
.side_menu {
    display: none;
}

.menu-button {
    display: none;
}

/* ヘッダーのスタイル*/
header {
    width: 100%;
    height: 100vh;
}

header .header_menu {
    position: fixed;
    width: 94%;
    height: 8%;
    top: 5%;
    left: 3%;
    border-radius: 10px;
    z-index: 10;
    display: flex;
    flex-direction: Row;
    justify-content: space-between;
    padding: 5px 2% 5px 2%;
    background-color: white;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
}

.logo {
    display:flex;
    height: 100%;
    flex-direction: Row;
    align-items: center;
}
.logo_img{
    height: 100%;
}

.logo_img img {
    height: 100%;
    padding: 0 3px 0 0;
}
.logo_text a{
    text-decoration: none;
    color: black;
}

.nav_menu {
    height: 100%;
    display: flex;
    align-items: center;
    
}

.nav_menu ul {
    display: flex;
    list-style: none;
}

.nav_menu li {
    position: relative;
}

.sub_menu {
    opacity: 0;
    position: absolute;
    top: 100%;
    left: 0;
    padding: 18% 0 0 0;
    transition: opacity 0.3s ease
}

.sub_menu_ul {
    border-radius: 5%;
    background-color: white;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    width: 14vw;
    flex-direction: column;
    padding: 5% 3%;
}

.nav_menu a {
    padding: 0 10px;
    text-decoration: none;
    color: black;
    transition: color 0.3s;
}
.nav_menu a:hover {
    color: gray;
}
.nav_menu .has_sub_menu:hover .sub_menu {
    opacity: 1;
}
/* スマホ用のメニューボタン */
.nav_menu #menuButton {
    display: none;
    width: 0;
    height: 0;
}


/* ヘッダーの背景画像 */
.header_img {
    display: flex;
    height: 100%;
    width: 100%;
    background-image: url("../images/image7.jpeg");
    background-size: cover;
    background-position: center;
}

.heading-11 {
    font-size: 4vw;
    max-height: 2.4em;
    position: relative;
    padding: .5em .7em;
    background-color: #2b2b2b;
    color: #fff;
}

.heading-11::before {
    position: absolute;
    top: 100%;
    left: 0;
    border-bottom: solid 10px transparent;
    border-right: solid 20px #1b1b1b;
    content: '';
}

#title1 {
    margin-top: 15%;
    margin-left: 20%;
}
#title2 {
    margin-top: 30%;
    margin-left: -10%;
}

/* === メインセクションのスタイル === */
main {
    padding: 5% 0;
    background-color: white;
    font-family: 'Noto Serif', serif;
}

main .container {
    width: 80%;
    margin: 0 auto;
    display: flex;/* 子要素を柔軟に並べるモード */
    flex-direction: column; /* 縦方向に並べる */
    justify-content: space-between;/* 子要素を均等割り付け */
}

section {
    padding: 5%;
    display: flex;/* 子要素を柔軟に並べるモード */
    justify-content: space-between;/* 子要素を均等割り付け */
    align-items: center;/* 子要素の垂直方向を中央ぞろえ */
}

section h2 {
    font-size: 24px;
    margin-bottom: 20px;
}

section p {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 20px;
}
.box {
    display: flex;  /* 横並び */
    align-items: stretch; /* 高さを揃える */
    box-sizing: border-box; /* 高さ計算を統一 */
}


.box h2 span {
    padding: 0 5px 40px 5px;
}

/* PC表示（769px以上） */
@media screen and (min-width: 769px) {
    .pc-only { display: flex; }
    .mobile-only { display: none; }
}

.image {
    width: 60%;
    max-height: 300px;
    overflow: hidden; /* はみ出た部分を隠す */
}

section img {
    max-width: 100%;
    padding: 0 5%;
}

/*
.news ul {
    list-style: none;
}

.news ul li {
    margin-bottom: 10px;
}

.news ul li a {
    text-decoration: none;
    color: #2c3e50;
    font-size: 16px;
}

.news ul li a:hover {
    color: #18bc9c;
}
*/

.special_order {
    height: 100%;
    display: flex;
    justify-content: center;
    padding: 0 0 0 5%;
}

table{
  border-collapse:collapse;
  margin:0 auto;
  width: 100%;
}
th{
  color:#005ab3;
}
td{
  border-bottom:1px dashed #999;
}
th,tr:first-child td{
  border-top: none;
}
th,tr:last-child td{
  border-bottom: none;
}
td,th{
  padding:10px;
}

.delivery_area {
    height: 100%;
    display: flex;
    justify-content: center;
    padding: 0;
}

.delivery_area th {
  color: #888888;
  padding:0;
}
.delivery_area td{
  border-bottom:1px dashed #999;
  padding:0 0 5px 0;
}


/*
table{
  border-collapse:collapse;
  margin:0 auto;
}
th{
  color:#005ab3;
}
td{
  border-bottom:1px dashed #999;
}
th,tr:first-child td{
  border-top:2px solid #005ab3;
}
th,tr:last-child td{
  border-bottom:2px solid #005ab3;
}
td,th{
  padding:10px;
}*/

/* お問い合わせボタン */
#contact_container {
    align-items: center;/* 子要素を中央ぞろえ */
    flex-direction: column;
    display: flex;
    width: 100%;
}

a.btn-border {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;

  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;

  border-radius: 0;

  width: 45%;
}

a.btn-border:before,
a.btn-border:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;

  position: absolute;

  width: 100%;
  height: 2px;

  content: '';
  -webkit-transition: all .3s;
  transition: all .3s;

  background: #000;
}

a.btn-border:before {
  top: 0;
  left: 0;
}

a.btn-border:after {
  right: 0;
  bottom: 0;
}

a.btn-border:hover:before,
a.btn-border:hover:after {
  width: 0;
}


/* メインセクションのスタイル
main {
    padding: 40px 0;
    background-color: white;
    font-family: '游ゴシック', 'メイリオ', serif;
}

main .container {
    width: 80%;
    margin: 0 auto;
    display: flex;/* 子要素を柔軟に並べるモード
    flex-direction: column; /* 縦方向に並べる *
    justify-content: space-between;/* 子要素を均等割り付け *
}

section {
    padding: 5%;
    border-radius: 15px;
    display: flex;/* 子要素を柔軟に並べるモード *
    flex-direction: column;
    justify-content: space-between;/* 子要素を均等割り付け *
    align-items: center;/* 子要素の垂直方向を中央ぞろえ *
}


section h2 {
    font-size: 24px;
}

section p {
    font-size: 16px;
    line-height: 1.6;
}

.back_concrete{
    background-color: rgba(0, 0, 0, 0.2);
    border: solid 2px black;
    border-radius: 15px;
    padding: 5px;
}

.front_concrete {
    border: dashed 2px white;
    border-radius: 15px;
    padding: 5%;
}

.first .container-description p {
    font-size: 25px;
    font-weight: bold;
}

.container-title {
    align-items: center;
    text-align: center;
}

.container-title h2 {
    display: inline-block;
    position: relative;
    color: #333;
    font-size: 40px;
    font-weight: 400;
    font-family: 'fantasy';
}

.container-title h2:before {
    content: '';
    display: inline-block;
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 4px;
    background-color: #9ed7ff;
}

.description {
    padding: 40px 5px;
}

.description h2 span {
    padding: 0 5px 40px 5px;
}

.container_img {
    height: 60vh;
    width: 100%;
    overflow: hidden; /* はみ出た部分を隠す
}

.container_img img {
    width: 100%;
    height: auto;
    padding: 0;
}

.container-link {
    width: 100%;
    text-align: right;
}

.container-link a {
    color: black;
    transition: color .3s ease;
}

.container-link a:hover {
    color: gray;
}

.news ul {
    list-style: none;
}

.news ul li {
    margin-bottom: 10px;
}

.news ul li a {
    text-decoration: none;
    color: #2c3e50;
    font-size: 16px;
}

.news ul li a:hover {
    color: #18bc9c;
}

.special_order {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 0 0 0 5%;
}

table{
  border-collapse:collapse;
  margin:0 auto;
  width: 100%;
}
th{
  color:#005ab3;
}
td{
  border-bottom:1px dashed #999;
}
th,tr:first-child td{
  border-top: none;
}
th,tr:last-child td{
  border-bottom: none;
}
td,th{
  padding:10px;
}




/* フッターのスタイル */
footer {
    background-color: #2c3e50;
    color: white;
    padding: 20px 0;
    text-align: center;
}

footer .container {
    width: 80%;
    margin: 0 auto;
}

footer address {
    font-size: 14px;
    margin-top: 10px;
}

/*　アニメーション系のスタイル1 */

/* 初期状態は透明で位置を少しずらしておく */
.fade-in-text {
  opacity: 0;
  transition: opacity 1s ease;/* 1秒のアニメーションを設定 */
}

/* アニメーションを適用 */
.fade-in-text.visible {
  opacity: 1;
}

/*　アニメーション系のスタイル2 */

/* 初期状態では文字が下に配置され、透明にしておく */
.fade-in-text-title span {
  display: inline-block;
  opacity: 0;
  transform: translateY(30px); /* 文字が下に少しずれる */
  animation: fadeInUp 0.5s forwards; /* アニメーションを設定 */
  animation-delay: 0s; /* アニメーション開始の遅延（後でJavaScriptで設定） */
}

/* アニメーションの定義 */
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* スクロールして表示された時にアニメーションを適用 */
.fade-in-text-title.visible span {
  opacity: 1;
}


/* スマホ向けスタイル */
@media screen and (max-width: 768px) {
  body {
    font-size: 14px;
  }


/* メニュー表示 */
header .nav_menu{
    display: none;
}
.menu-button {
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  row-gap: 1vh;
  width: 6vh;
  height: 6vh;
  background-color: #ffffff;
  border: 0px;
  opacity: 1;
}

.menu-button__line,
.menu-button::before,
.menu-button::after {
  content: "";
  width: 60%;
  height: 2px;
  background-color: #000000;
  transition: transform 0.3s, opacity 0.3s;
}

.menu-button.is-opened .menu-button__line {
  opacity: 0;
}

.menu-button.is-opened::before {
  transform: translateY(1.4vh) rotate(45deg);
}

.menu-button.is-opened::after {
  transform: translateY(-1.4vh) rotate(-45deg);
}

.side_menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    right: 0;
    z-index: 5;
    width: 100%;
    height: 100vh;
    font-family: 'Montserrat', sans-serif;
    background-color: #555555;
    opacity: 0;
    visibility: hidden;
    transform: translateY(100vh);
    transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s;
    color: #ffffff;
}
.side_menu.is-opened {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.side_menu h2 {
  text-align: center;
  padding: 10% 0 15% 0;
}

.side_menu ul {
  list-style: none;
  width: 90%;
  text-align: center;
}

.side_menu li {
    border-bottom: 1px solid #ffffff;
    padding: 5% 0 ;
    display: flex;
    flex-direction: row;
    width: 100%;
}

.side_menu a {
  text-decoration: none;
  text-align: left;
  color: #ffffff;
  padding: 0 5%;
  width: 100%;
  height: 100%;
}
.space {
    display: inline-block;
    width: 1em;
}
div .space{
    height: 20%;
}

.submenuItems {
  display: none;
  background: #C8E6C9;
  li {
    border-bottom: 1px solid #B6B6B6;
  }
}

.submenuItems a {
  display: block;
  color: #727272;
  padding: 12px 12px 12px 45px;
  transition: all 0.4s ease-out;
  &:hover {
    background-color: #CDDC39;
    color: #fff;
  }
}

/* 　＝＝＝　　header　　＝＝＝　　 */
.heading-11 {
    font-size: 6vw;
    max-height: 2.4em;
    max-width: 300%;
    position: absolute;
    padding: .5em .7em;
    background-color: #2b2b2b;
    color: #fff;
}

.heading-11::before {
    position: absolute;
    top: 100%;
    left: 0;
    border-bottom: solid 10px transparent;
    border-right: solid 20px #1b1b1b;
    content: '';
}

#title1 {
    top: 20%;
    left: -10%;
}
#title2 {
    top: 30%;
    left: 25%;
}

/* PC/モバイル表示切替とorderプロパティ */
.pc-only { display: none; }
.mobile-only { 
    display: flex; 
    flex-direction: column; 
}

/* モバイル表示用のorderプロパティ */
.mobile-only .box-a { order: 1; }
.mobile-only .box-b { order: 2; }
.mobile-only .box-c { order: 4; }
.mobile-only .box-d { order: 3; }

/* モバイル表示時のパディング */
.mobile-only .box-a,
.mobile-only .box-b,
.mobile-only .box-c {
    padding: 0 3% 0 3%;
    width: 100%;
}

/* mainセクション */
main .container {
    width: 100%;
}


p.fade-in-text {
    font-size: 4vw;
}
.box {
    margin: 0 10% 10% 10%;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
    border-radius: 10%;
    border: 1px rgba(0,0,0,0.1);
}


section h2 {
    margin-bottom: 0;
}

section p {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 0;
}


section .image {
    width: 100%;
    max-height: 300px;
    overflow: hidden; /* はみ出た部分を隠す */
}

section img {
    max-width: 100%;
}


.special_order{
    padding: 0;
    td,th{
        padding:0;
        display: block;
        border-bottom: none;
    }
    .head {
        padding: 0 1em;
        font-weight: bold;
    }
    tr {
        display: block;
        padding: 1em;
        border-bottom: 1px dashed #999;
    }
}


/* お問い合わせボタン */
a.btn-border {
    width: 60%;
    max-width: 400px; /* 最大幅を制限 */
    padding: 3vw 5%;
    font-size: clamp(14px, 3.5vw, 18px); /* サイズを調整 */
    margin: 4vw auto;
}

}