body {
	font-family: "Noto Sans JP", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
}


/**
 * reset
 */
 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
 small, strike, strong, sub, /*sup, */tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
 fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
 article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup,
 menu, nav, output, ruby, section, summary, time, mark, audio, video, main {
	 margin: 0;
	 padding: 0;
	 border: 0;
	 outline: 0;
	 font-size: 14px;
	 font-weight: normal;
	 font-style: normal;
	 vertical-align: baseline;
	 background: transparent;
}

sup {
	vertical-align: top;
    font-size: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: normal;
	font-style: normal;
	background: transparent;
}

img {
    width: 100%;
    height: auto;
}

a {
	text-decoration: none;
    background-color: transparent;
    text-decoration: none;
    color: inherit;
}

ul, ol, li {
	list-style: none;
}

/* ヘッダー */
header {
    background-color: #0098A8;
}
.headertop {
    position: relative;
    background-image: url('../../img/SDS_KnitPaint_image.jpg');
    background-size: cover;
    background-position: center;
    height: 500px;
}
.header_bg {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 70%;
    height: 500px;
    background-color: #0094bd;
    transform: skewX(30deg);
    transform-origin: bottom left;
    opacity: 0.3;
    z-index: 1;
}
.header-inner {
    margin-left: 20px;
    margin-right: 20px;
	text-align: center;
    display: flex;
    align-items: center;
    vertical-align: baseline;
    position: relative;
    z-index: 2;
}
.header-inner::after {
    content: "";
    display: table;
    clear: both;
}
.header-logo img {
    margin-top: 20px;
    width: 200px;
    filter: drop-shadow(0px 0px 5px rgba(0, 148, 189, 4.5));
}
.header-menu {
    display: flex;
    margin-top: 26px;
}
.header-menu-list {
    margin-left: 45px;
}
.header-menu-list a {
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    text-shadow: 0px 0px 5px rgba(0, 148, 189, 0.5), 
             0px 0px 5px rgba(0, 148, 189, 0.5), 
             0px 0px 5px rgba(0, 148, 189, 0.5);
}
.language_box {
    top: 20px;
    right: 19px;
    width: 80px;
    height: auto;
    text-align: center;
    position: absolute; /* 絶対位置指定 */
    z-index: 1200;
}
.language-title {
    background-color: #0098A8; /* 緑色の背景 */
    color: white; /* 白い文字 */
    padding: 10px; /* 内側の余白 */
    cursor: pointer; /* マウスカーソルをポインタに変更 */
}
.language-down {
    display: none;  /* 初期状態では非表示 */
    position: absolute; /* 絶対位置で配置 */
    top: 100%; /* 親要素の下に配置 */
    width: 80px;
    background-color: #ffffff; /* 背景を白に設定 */
    box-shadow: 0px 2px 5px rgba(0,0,0,0.2); /* 少し影をつける */
    z-index: 1200;
}
.language_box:hover .language-down {
    display: block; /* 親要素全体がホバーされたら表示する */
}
.language {
    color: #0098A8; /* 緑色の文字 */
    padding: 10px; /* 内側の余白 */
    text-decoration: none; /* 下線なし */
}
.language:hover {
    background-color: #E6F4F8; /* ホバー時に背景色を変更 */
}
.catch_copy {
    position: absolute;
    bottom: 12%;
	left: 5%;
    margin: 20px auto 10px auto;
	z-index: 3;
}
.catch_copy p {
    font-size: 50px;
    font-weight: 700;
    line-height: 90px;
    color: #ffffff;
    text-shadow: 0px 0px 10px #0094bd, 0px 0px 10px #0094bd, 0px 0px 10px #0094bd;
}

/* Coolar用ヘッダー */
.headertop_collar {
    position: relative;
    background-image: url('../../img/SDS_KnitPaint_image.jpg');
    background-size: cover;
    height: 100px;
    z-index: 12;
}
.header_bg_collar {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 50%;
    height: 100px;
    background-color: #0094bd;
    transform: skewX(30deg);
    transform-origin: bottom left;
    opacity: 0.3;
    z-index: 1;
}

/* ヘッダーレスポンシブ675px-1000pxのスタイル */
@media screen and (min-width: 676px) and (max-width: 1000px) {
    .catch_copy p {
        font-size: 40px;
    }
}

/* ヘッダーレスポンシブ用768px以下のスタイル */
@media screen and (max-width: 768px) {
    .headertop {
        display: none;
    }
    .responsive-header {
        display: block;
        width: 100%;
        z-index: 10;
    }
    .responsive-header .responsive-back {
        background-color: #ffffff;
        height: 70px;
        width: 100%;
        box-shadow: 0px 2px 5px rgba(0,0,0,0.2); /* ドロップシャドウ追加 */
        position: relative;
        z-index: 3;
    }
    .responsive-header .logo {
        position: absolute;
        max-width: 230px; /* 最大幅150ピクセル */
        height: auto; /* 高さは自動調整 */
        margin: 27px 27px;
        z-index: 4;
    }
    .responsive-header .background-image {
        height: 200px;
        background-image: url('../../img/SDS_KnitPaint_image.jpg');
        background-size: cover;
        background-position: center;
        opacity: 0.9;
    }
    .responsive-header .catch_copys p {
        background: #0098A8;
        font-size: 30px;
        line-height: 60px;
        font-weight: 700;
        color: #ffffff;
        text-align: center;
        margin: auto;
        padding: 20px;
        z-index: 3;
    }
    /* Collar用ヘッダーレスポンシブ用 */
    .headertop_collar {
        display: none;
    }
}

/* ヘッダーレスポンシブ500px-675pxのスタイル */
@media screen and (min-width: 500px) and (max-width: 675px) {
    .responsive-header .catch_copys p {
        font-size: 25px;
    }
    .main-tex {
        font-size: 13px;
        margin-left: 5%;
        margin-right: 5%;
    }
}

/* 769px以上のスタイル */
@media screen and (min-width: 769px) {
    .responsive-header {
        display: none;
    }
}

/* 500px以上のスタイル */
@media screen and (min-width: 500px) {
    .responsive-header .catch_copys2 {
        display: none;
    }
}

/* 500pxより小さい場合は改行したものを出す */
@media screen and (max-width: 499px) {
    .responsive-header .catch_copys {
        display: none;
    }
    .main-tex {
        margin-left: 5%;
        margin-right: 5%;
    }
    .responsive-header .catch_copys2 p {
        background: #0098A8;
        font-size: 28px;
        line-height: 60px;
        font-weight: 700;
        color: #ffffff;
        text-align: center;
        margin: auto;
        padding: 20px;
        z-index: 3;
    }
    .responsive-header .logo {
        max-width: 180px; /* 最大幅180ピクセル */
    }
}    
/* 500px以下で改行無しのものを出したい */
.responsive-break {
    display: block; /* デフォルトではブロック要素として表示 */
}
@media (max-width: 600px) {
    .break-600 {
        display: none; /* 600px以下の場合は非表示 */
    }
}
@media (max-width: 500px) {
    .break-500 {
        display: none; /* 500px以下の場合は非表示 */
    }
}

/* メニューリスト */
.list-box {
    display: flex;
    text-align: center;
    justify-content: space-around;
    padding: 12px 20px;
    background: #F5F5F5; /* 背景色 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* ドロップシャドウ */
    position: relative; /* 相対位置 */
    z-index: 10; /* 他の要素より前面に表示 */
}
/* 各メニューアイテム */
.menu-list a {
    color: #0098A8;
    font-weight: 700;
    font-size: 16px;
}
/* スクロール時の固定スタイル */
.fixed {
    position: fixed; /* 固定位置 */
    top: 0; /* 上端からの距離 */
    left: 0; /* 左端からの距離 */
    right: 0; /* 右端まで広げる */
}
/* メニューレスポンシブ用768px以下非表示 */
@media screen and (max-width: 768px) {
    .list-box {
        display: none;
    }
}

/* メインコンテンツ */
main {
    background-color: #0098A8;
}
.main-tex p {
    color: #ffffff;
    padding-top: 50px;
    font-size: 16px;
    font-weight: 400;
    text-align: center;
    line-height: 30px;
    padding-bottom: 70px;
}
.container-f {
    position: relative;
    background-image: url('../../img/wave_1.svg'); /* 背景画像パス */
    background-size: 2300px auto; /* 幅2300px、高さは自動調整 */
    background-repeat: no-repeat;
    background-position: center top;
    margin-top: 50px;
}
#features {
    padding-top: 100px; /* 固定ヘッダーの高さに合わせて調整 */
}
.title {
    display: flex;
    justify-content: center;     /* 水平方向の中央揃え */
    margin: 0 5%;
}
.title p {
    font-size: 28px;
    font-weight: 700;
    color: #ffffff ; 
}
.featurs-cont {     
    padding-top: 100px;
}
/* Collarのロゴ用 */
.collarlogo {
    width: 100px;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding-top: 100px;
}
/* 親ボックス */
.collar-info-box {
  margin-top: 10px;
}

/* 中央揃え、重ね用 */
.collar-logo-stack {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px auto;
  max-width: 90%;
}

/* ロゴ画像（背景扱い） */
.collar-logo-stack img {
  width: 100px;
  height: auto;
  display: block;
  opacity: 0.5;
  position: absolute;
  z-index: 1;
}

/* リンクボックス（テキスト含む） */
.collar-link-box {
  position: relative;
  z-index: 2;
  display: block;
  border: 1px solid #ffffff;
  max-width: 90%;
  padding: 22px 27px;
  text-decoration: none;
  color: #ffffff;
  text-align: center;
  line-height: 1.8;
  font-size: 14px;
}

/* ホバー時の視覚効果（任意） */
.collar-link-box:hover {
  background-color: rgba(255, 255, 255, 0.15);
}

/* 左側コンテナスタイル */
.left-container {
    padding-top: 60px;
    position: relative;
    display: flex; 
    align-items: center; 
 }
 .feature-image-l {
    max-width: 870px;
 }
 .left-text {
    background-color: rgba(255, 255, 255, 0.9); /* 白い背景 */
    padding: 30px; /* 内側の余白 */
    width: 560px; /* 固定幅 */
    /* height: 220px; 固定高さ */
    position: absolute; /* 絶対配置 */
    left: 50%; /* 左端を中央に */
    transform: translateX(-50%); /* 中央に移動 */
    box-sizing: border-box; /* パディングを含めたサイズ計算 */
}
/* 右側コンテナスタイル */
.right-container {
    padding-top: 60px;
    position: relative; 
    display: flex; 
    align-items: center; 
 }
 .right-text {
    position: absolute; 
    background-color: rgba(255, 255, 255, 0.9);
    padding: 30px;
    width: 560px; /* 固定幅 */
    /* height: 220px; 固定高さ */
    left: 50%; 
    transform: translateX(-50%);
    box-sizing: border-box; /* パディングを含めたサイズ計算 */
}
.feature-image-r {
    max-width: 870px; /* 最大幅870ピクセル */
    margin-left: auto;
}
/* テキストエリア内タイトルと本文スタイル */
.text-title {
   font-size : 18px;
   font-weight: 700;
   color: #414242;
   padding-bottom: 20px;
   text-align: center;
}
.text-title-long {
   font-size : 18px;
   font-weight: 700;
   color: #414242;
   padding-bottom: 20px;
   text-align: center;
}
.left-text p {
    font-size : 16px;
    font-weight: 400;
    max-width: 450px;
    color: #414242;
    line-height: 30px;
    margin: auto;
}
.right-text p {
    font-size : 16px;
    font-weight: 400;
    max-width: 450px;
    color: #414242;
    line-height: 30px;
    margin: auto;
}
/* 左からスライドイン */
@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* 右からスライドイン */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* 下からスライドイン（スマホ用） */
@keyframes slideInBottom {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* 初期状態は非表示 */
.left-container, .right-container {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

/* 左右からスライドイン */
.left-container.active {
    animation: slideInLeft 0.5s forwards;
}

.right-container.active {
    animation: slideInRight 0.5s forwards;
}

/* スマホサイズ用の下からスライドイン */
@media screen and (max-width: 768px) {
    .left-container.active, .right-container.active {
        animation: slideInBottom 0.5s forwards;
    }
}

/* レスポンシブ用660px以下のスタイル */
@media screen and (max-width: 660px) {
    .right-text, .left-text, .right-text p, .left-text p {
        width: 90%;
    }
}
/* レスポンシブ用560px以下のスタイル */
@media screen and (max-width: 560px) {
    .right-text, .left-text {
        height: 265px; 
    }
    .right-text p, .left-text p {
        font-size: 14px;
    }
    .feature-image-l, .feature-image-r {
        height: 300px;
        object-fit: cover; /* 縦横比を維持しつつ、中央を基準にカット */
        width: 100%; /* 幅を100%に設定 */
    }
}
/* レスポンシブ用400px以下でタイトル下のパディングをなくして詰める */
    @media screen and (max-width: 400px) {
    .text-title-long {
        padding-bottom: 0px;
        font-size : 15px;
    }
    .right-text p, .left-text p {
        font-size: 13px;
    }
    .text-title {
       font-size : 15px;
    }
}
/* 2300px以上で背景のウェーブを幅いっぱいに表示 */
@media screen and (min-width: 2300px) {
    .container-f {
        background-size: 100%;
    }
}
/* 2000px以上でイメージの位置を固定 */
@media screen and (min-width: 2000px) {
    .feature-image-l {
        margin-left: 15%;
    }
    .feature-image-r {
        margin-right: 15%;
    }
}

/* お問合せコーナー */
.inq_box {
    background: #ffffff;
    padding: 50px;
    text-align: center;
    margin-top: 240px;
}
.inq_box p {
    font-size: 20px;
    font-weight: 700;
    line-height: 45px;
    color: #414242;
}
.button {
    color: #ffffff;
    background: #E9923B;
    padding: 10px 0;
    border-radius: 10px;
    margin: 20px auto 0; /* 上マージンは20px、左右は自動 */
    display: block; /* インラインブロックからブロックに変更 */
    font-size: 20px;
    font-weight: 700;
    max-width: 300px;
}

/* 掲載内容 */
.container-c {
    position: relative;
    background-image: url('../../img/wave_2.svg'); /* 背景画像パス */
    background-size: 2300px auto; /* 幅2300px、高さは自動調整 */
    background-repeat: no-repeat;
    background-position: center top;
    margin-top: 50px;
    padding-top: 170px;
    height: auto;
}
#contents {
    padding-top: 100px;
}
.container-c h3 {
    margin-bottom: 155px;
}
.contents-box {
    background-color: #F5F5F5; /* 白い背景 */
    padding: 40px 20px; /* 上下30px、左右20pxのパディング */
    width: 80%; /* 幅を80%に設定 */
    margin: auto; /* 中央揃え */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 軽い影を追加 */
    max-width: 1400px;
}
.content-title {
    color: #0098A8;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    padding-bottom: 30px;
}
.contents_three {
    display: flex;
    justify-content: space-between; /* 各コンテンツ間にスペースを追加 */
    width: 100%;
} 
.content {
    flex: 1; /* 各コンテンツを均等に配置 */
    margin: 0 20px; /* 各コンテンツ間にマージンを追加（左右20px） */
    margin-bottom: 20px;
}
.content p {
    color: #414242;
    font-size: 16px;
    font-weight: 400;
    line-height: 30px;
    margin-top: 10px;
    margin-bottom: 20px;
}
.content-title1,
.content-title2,
.content-title3 {
    font-size: 16px; /* タイトルサイズ */
    font-weight: 700;
    text-align: center;
    margin-bottom: 5px; /* タイトルと本文の間隔 */
    height: 75px;
    display: flex; /* フレックスボックスを使用 */
    align-items: center; /* 垂直方向に中央揃え */
    justify-content: center; /* 水平方向に中央揃え */
}
.content-title1 {
    color: #ffffff;
    background-color: #806EA8;
    padding-top: 9px;
    padding-bottom: 6px;
}
.content-title2 {
    color: #ffffff;
    background-color: #6E6E6E;
    padding-top: 9px;
    padding-bottom: 6px;
}
.content-title3 {
    color: #ffffff;
    background-color: #EFA335;
    padding-top: 10px;
    padding-bottom: 5px;
}
.content-title3 span {
    white-space: nowrap; /* 改行を防止して1行にまとめる */
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
}
.content img {
    width: auto; /* 幅は自動調整（縦横比を保持） */
    max-height: 96px; /* 高さ自動調整 */
}
.content-teximag {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* 上下のスペースを均等分配 */
    height: 78%; /* 高さを100%に設定 */
    align-items: flex-start;
}
/* レスポンシブ用1050px以下のスタイル */
@media screen and (max-width: 1050px) {
    .contents_three {
        flex-direction: column; /* 縦方向に配置 */
        align-items: center; /* 中央揃え */
    }
    
    .content {
        width: 100%; /* 幅を100%に設定 */
        margin: 30px 0; /* 上下マージンを追加（必要に応じて調整） */
    }
    .content-title {
        padding: 0;
    }
    .container-c {
        margin-top: -40;
    }
}
/* 2300px以上で背景のウェーブを幅いっぱいに表示 */
@media screen and (min-width: 2300px) {
    .container-c {
        background-size: 100%;
    }
}

/* 動作環境 */
.container-e {
    position: relative;
    background-image: url('../../img/wave_3.svg'); /* 背景画像パス */
    background-size: 2300px auto; /* 幅2300px、高さは自動調整 */
    background-repeat: no-repeat;
    background-position: center top;
    margin-top: 200px;
    height: auto;
}
.container-e h3{
    padding: 130px  0;
}
#environment {
    padding-top: 85px; /* 固定ヘッダーの高さに合わせて調整 */
}
/* 2300px以上で背景のウェーブを幅いっぱいに表示 */
@media screen and (min-width: 2300px) {
    .container-e {
        background-size: 100%;
    }
}

/* スペック表 */
#local_spec_table, #local_cms_table {
 
    width: 90% ;
    max-width: 1400px;
    border-collapse: collapse;
    background-color: #D7EDF2;
    margin: auto ;

    tbody {
        color: #414242;
    }

    tr th {
        color : white ;
        background-color: #007c89 ;
        text-align: center ;
        padding : 12px ;
        border:   2px solid white ;
    }

    tr td {
        text-align: left ;
        padding: 8px 8px 14px 8px ;
        border:   2px solid white ;
    }

    .index {
        display: inline-block ;
        width: 3em ;
    }

    .item_field {
        background-color: #c4d7d9 ;
    }

    .header_field_first {
        background-color: #004047 ;
    }

    .header_cms_devices {
        text-align: left ;
        background-color: #007c89;
        border-bottom: 16px solid ;
    }

    .remarks {
        background-color: white ;
    }
}
.spex-word {
    color: #ffffff;
    font-size: 12px;
    margin: 5%;
    max-width: 1400px;
    width: 90%;
    margin: auto;
    margin-top: 20px;
}
.spex-word p {
    text-indent: -0.5em; /* アスタリスクの幅だけインデントを負に設定 */
    padding-left: 0.5em; /* アスタリスクの幅だけ左にパディングを追加 */
    margin: 0; /* マージンをリセット */
    line-height: 1.5; /* 行間を調整 */
}

/* レスポンシブ用730px以下のスタイル */
@media screen and (max-width: 730px) {
    .cpu {
        display: none;
    }
}
/* 731以上では改行バージョン非表示 */
@media screen and (min-width: 731px) {
    .cpu2 {
        display: none;
    }
}

/* レスポンシブ用600px以下のスタイル */
@media screen and (max-width: 600px) {
    tbod, .note, .cpu2, tr td {
        font-size: 12px;
    }
    .container-e {
        margin-top: 100px;
    }
}

/* ここまで */

/* サポート */
.container-s {
    position: relative;
    background-image: url('../../img/wave_4.svg'); /* 背景画像パス */
    background-size: 2300px auto; /* 幅2300px、高さは自動調整 */
    min-width: 100%;
    background-repeat: no-repeat;
    background-position: center top;
    margin-top: 60px;
    padding-top: 90px;
    height: auto;
}
#support {
    padding-top: 100px;
}
.container-s h3 {
    margin-bottom: 120px;
}
.support-box {
    display: flex;
    justify-content: center;
}

.supports {
    display: flex;
    flex-direction: column; /* 縦方向に配置 */
    align-items: center; /* 中央寄せ */
    margin: 0 60px; /* 各要素間のスペース */
}

.supports img {
    max-width: 500px;
    margin-bottom: 30px; /* imgの下にパディングを追加 */
}

.supports .logo {
    max-width: 300px;
    height: 66px; /* 高さを60pxに設定 */
    object-fit: contain; /* アスペクト比を維持しつつサイズ調整 */
}

.support-word {
    color: #ffffff;
    font-size: 20px;
    font-weight: 700;
    padding-bottom: 50px;
}
.supports p {
    color: #ffffff;
    font-size: 16px;
    max-width: 500px;
    box-sizing: border-box;
    line-height: 30px;
}
.supports-button {
    color: #4da8c8;
    background: #ffffff;
    padding: 10px 0;
    border-radius: 10px;
    margin-top: 40px;
    margin-bottom: 40px;
    font-size: 20px;
    font-weight: 700;
    width: 300px;
    text-align: center;
}

/* レスポンシブ用1200px以下のスタイル */
@media screen and (max-width: 1200px) {
    .support-box {
        display: flex;
        flex-direction: column; /* 縦方向に配置 */
        align-items: center; /* 中央揃え */
    }
    .supports {
        margin-top: 100px; /* マージンを追加 */
    }
    .container-s h3 {
        margin-bottom: 0px;
    }
}
/* 2300px以上で背景のウェーブを幅いっぱいに表示 */
@media screen and (min-width: 2300px) {
    .container-s {
        background-size: 100%;
    }
}

/* ダウンロード */
.container-d {
    position: relative;
    background-image: url('../../img/wave_5.svg'); /* 背景画像パス */
    background-size: 2300px auto; /* 幅2300px、高さは自動調整 */
    background-repeat: no-repeat;
    background-position: center top;
    height: auto;
}
#download {
    padding-top: 230px;
}
.container-d h3{
    padding-bottom: 120px;
}
.download-box {
    background: #ffffff;
    display: flex;
    margin-bottom: 20px;
    width: 80%; /* 横幅を80%に設定 */
    max-width: 1400px; /* 最大幅を1000pxに設定 */
    margin-left: auto; /* 左右中央寄せのため自動マージン */
    margin-right: auto; /* 左右中央寄せのため自動マージン */
    color: #414242;
    align-items: center;
}
.download-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
}
.download-box img {
    max-width: 30%; /* 横幅を親要素に合わせる */
    height: auto; /* 縦横比を保つため高さは自動調整 */
}
.download-text {
    padding: 40px;
}
.download-text p {
    line-height: 30px;
    font-size: 16px;
    text-align: left;
}
.arrow-down {
    width: 0;
    height: 0;
    border-left: 20px solid transparent; /* 左側の透明なボーダー */
    border-right: 20px solid transparent; /* 右側の透明なボーダー */
    border-top: 20px solid #ffffff; /* 上側の黒いボーダー */
    margin: 20px auto; /* 左右のマージンを自動で設定 */
}

/* レスポンシブ用1270px以下のスタイル */
@media screen and (max-width: 768px) {
    .download-box {
        flex-direction: column; /* 縦方向に配置 */
        align-items: center; /* 中央揃え */
        text-align: center; /* テキストも中央揃え */
    }

    .download-box img {
        margin: 40px auto 0px auto;
        max-width: 50%;
    }
}
/* 2300px以上で背景のウェーブを幅いっぱいに表示 */
@media screen and (min-width: 2300px) {
    .container-d {
        background-size: 100%;
    }
}

/* お問合せリンクボタンのスタイル */
.contact-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 85px;
    height: 85px;
    background-color: #F5F5F5;
    border-radius: 50%;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    text-decoration: none;
    opacity: 1; /* 常に表示 */
    transition: opacity 0.3s ease-in-out; /* フェードイン・フェードアウトのアニメーション */
}

.contact-button img {
    width: 50px;
    height: 50px;
}

/* スマホサイズ用のお問合せリンクバーのスタイル */
.contact-bar {
    display: none; /* 初期状態では非表示 */
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background-color: #F5F5F5;
    box-shadow: 0px -2px 8px rgba(0, 0, 0, 0.2);
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.contact-bar img {
    width: 40px;
    height: 40px;
}

/* 大きなサイズではメールボタン消す */
@media screen and (min-width: 769px) {
    .contact-bar {
        display: none; /* バーを非表示にする */
    }
}

/* スマホサイズ用のスタイル */
@media screen and (max-width: 768px) {
    .contact-button {
        display: none; /* スマホサイズでは非表示 */
    }
    .contact-bar {
        display: flex; /* スマホサイズでは表示 */
    }
}

/* フッター */
footer {
    background-color: #F5F5F5;
}
.footer-box {
    padding: 100px 20% 70px 20%;
    margin-bottom: 70px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* 上揃えにする */
}
.footer-box img {
width: 250px;
}
.footer-text a {
    font-size: 16px;
    color: #414242;
    font-weight: 700;
    line-height: 20px;
}
.footer-text li{
padding: 5px;
}
address {
    text-align: center;
    padding-bottom: 70px;
}
@media (max-width: 1200px) {
    .footer-box {
    flex-direction: column; /* 縦並びにする */
    align-items: center; /* センタリング */
    text-align: center;
    padding: 90px 20px; /* パディングを調整 */
    }
    
    .footer-text {
    margin-top: 30px; /* footer-text同士の隙間を空ける */
    }
}