@charset "UTF-8";*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}html{font-family:YakuHanJP,Hiragino Sans,Hiragino Kaku Gothic ProN,Noto Sans JP,Meiryo,sans-serif;letter-spacing:.1em;scroll-behavior:smooth}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.block{display:block}.flex{display:flex}.table{display:table}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.flex-wrap{flex-wrap:wrap}.border{border-width:1px}.grayscale{--tw-grayscale: grayscale(100%);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.invert{--tw-invert: invert(100%);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}

.sp{display: none;}

.wrapper{
    background:url(../src/wrap-bg.png) repeat-y;
    background-size: cover;
    background-position: 0 -51%;
}
a:hover{
    opacity: 0.6;
    transition: 0.3s;
}
.post-img img, .post-content img{
    display: block;
    width: 100%;
    margin: 20px auto;
    max-width: 800px!important;
}
p{
    font-size: 15px;
}

h2 {
  font-size: 30px;
  font-weight: bold;
  display: inline-block; 
  padding: 0 20px; 
  text-align: center;
}

h2 span {
  font-size: 15px;
  display: block;
  text-align: center;
  position: relative;
  margin-left: -20px; 
  margin-right: -20px;  
  padding-top: 10px;
  font-weight: normal;
}

h2 span::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; 
  height: 5px;
  background-color: #00a5e5;
  border-radius: 5px;
}

.l-container-width{
    padding: 60px 0;
    max-width: 1000px;
    margin: 0 auto;
    position:relative;
}
.l-container-100{
    width: 100%;
    background: #d4d4d4;
    position:relative;
}

.btn-common{
    border-radius: 50%;
    border: 3px solid #00a5e5;
    background-color: #fff;
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 0;
    margin: 0 auto;
    right: 0;
    font-size: 14px;
    z-index: 1;
}

@media screen and (max-width: 1024px) {
    .l-container-width{
        padding: 60px 0;
        max-width: 90%;
        margin: 0 auto;
    }

    .sp{display: block;}
}

/* ======================================
    header
====================================== */
header {
  display: flex;
  justify-content: space-around;
  align-items: center;
  max-width: 1920px;
  padding: 40px 0;
  position: relative; /* ボタンの基準用 */
  z-index: 100;
  margin: 0 auto;
}

header .header-logo {
  display: block;
  max-width: 260px;
  position: relative; 
  z-index: 200;      
}
header .header-logo img{
    max-width: 260px;  
    display: block;
    height: 40px;
}


header ul {
  display: flex;
  gap: 35px;
}

/* --- ハンバーガーボタンの基本スタイル（PCでは隠す） --- */
.hamburger {
  display: none;
  width: 40px;
  height: 40px;
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 200;
}

@media (max-width: 768px) {
   header{
        width: 90%;
        margin: 0 auto;
        justify-content: space-between;
        padding: 15px 0;
   } 
  .hamburger {
    display: block; 
  }

  /* 3本線のデザイン */
  .hamburger span {
    display: block;
    width: 30px;
    height: 2px;
    background-color: #aad0df;
    position: absolute;
    left: 5px;
    transition: 0.3s;
  }
  .hamburger span:nth-child(1) { top: 12px; }
  .hamburger span:nth-child(2) { top: 20px; }
  .hamburger span:nth-child(3) { top: 28px; }

  .hamburger.is-active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .hamburger.is-active span:nth-child(2) { opacity: 0; }
  .hamburger.is-active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.header-nav {
    position: fixed;
    top: 0;
    right: -100%; 
    width: 100%;   
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.5); 
    backdrop-filter: blur(5px); 
    padding: 100px 40px;
    transition: 0.4s; 
    z-index: 150;             
    box-shadow: none;       
  }

  /* 縦中央に寄せたい場合は以下を追加 */
  .header-nav.is-active {
    right: 0;
  }

    header ul {
        height: 100%;
        margin-top: 50px;
        flex-direction: column; 
        gap: 30px;
        font-size: 1.2rem;
    }
    .header-nav ul li a{
        position: relative;
        width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
        display: block;
    }
    .header-nav ul li a::before{
        content: "";
        position: absolute;
        bottom: 8px;
        left: 0;
        width: 100%;
        height: 5px;
        background-color: #689acb;
        z-index: -1;
    }
}
/* ======================================
   .fv
====================================== */
.fv{
    background:url(../src/fv_pc.png)center no-repeat , #fff;
    max-width: 1920px;    
    position: relative;
    margin: 0 auto;
}
.fv h1 {
    max-width: 800px;
    margin: 0 auto;
    padding: 235px 0;
}
.fv h1 img{
    width: 100%;
}

.arrow{
    position: absolute;
    bottom: 8%;
    left: 0;
    right: 0;
    display: block;
    width: 45px;
    margin: 0 auto;
}
@media screen and (max-width: 768px) {
    .fv{
        background:url(../src/fv_sp.png)center no-repeat , #fff;
        background-size: cover;
    }
    .fv h1 img{
        width: 80%;
        margin: 0 auto;
    }
    .arrow{
        width: 25px;
    }
}   
/* ======================================
    .top-content-area
====================================== */
.top-content-area{
    padding: 50px 0 0;
}
.top-content-message{
    font-size: 27px;
    font-weight: normal;
    text-align: center;
    letter-spacing: 0.15rem;
    line-height: 3.5rem;
}

.top-content-area .box{
    margin-top: 65px;
    background: linear-gradient(to bottom, #ffffff 0%, #ffffff 20%, #333333 20%, #333333 100%);
}
.top-content-area .box p{
    text-align: center;
    color: #fff;
    font-size: 20px;
    padding: 40px 0 60px;
    line-height: 1.7;
    letter-spacing: 0.08em;
}

.top-content-area .box ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 20px;
}
.top-content-area .box ul li{
    border-radius: 50%;
    padding: 10px;
    box-sizing: border-box;
    border: 3px solid #333333;
    background-color: #fff;
    font-size: 20px;
    text-align: center;
    color: #333333;
    font-weight: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    width: 200px;
    height: 200px;
    flex-direction: column; /* 縦並び */
    justify-content: center; /* 中央に寄せる */
    gap: 10px;
}
.top-content-area .box ul li span{
    color: #c2c2c2;
    display: block;
    text-align: center;
    font-size: 14px;
    font-weight: normal;
    width: 100%;
}
@media screen and (max-width: 768px) {

    .top-content-message{
        width: 90%;
        margin: 0 auto;
        font-size: 17px;
        line-height: 2rem;
    }

    .top-content-area .box p{
        font-size: 15px;
        width: 90%;
        margin: 0 auto;
    }

    .top-content-area .box ul li{
        width: 160px;
        font-size: 16px;
        height: 160px;
    }
    .top-content-area .box ul li span{
        font-size: 12px;
    }
}
/* ======================================
    works-area
====================================== */
.works-area ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 40px 20px;
    margin: 40px auto;
}
.works-area ul li{
    width: calc(100% / 2 - 20px);
    position: relative;
}
.works-area ul li a{
    opacity: 1;
}
/* 7つ周期の5番目 (5, 12, 19...) */
.works-area ul li:nth-child(7n+5) { 
    width: calc( 100% / 3 - 20px);
}

/* 7つ周期の6番目 (6, 13, 20...) */
.works-area ul li:nth-child(7n+6) { 
    width: calc( 100% / 3 - 20px);

 }

/* 7つ周期の7番目 (7, 14, 21...) */
.works-area ul li:nth-child(7n) { 
    width: calc( 100% / 3 - 20px);
 }

 /* 2番目 (2, 9, 16...) */
.works-area ul li:nth-child(7n+2) {
    padding: 20px 0 0;
    border-top: 3px solid #00a5e5;
}

/* 3番目 (3, 10, 17...) */
.works-area ul li:nth-child(7n+3) {
    padding: 20px 0 0;
    border-top: 3px solid #00a5e5;
}

/* 6番目 (6, 13, 20...) */
.works-area ul li:nth-child(7n+6) {
    padding: 20px 0 0;
    border-top: 3px solid #00a5e5;
}

.works-area ul li img{
    width: 100%;
    object-fit: cover;
    object-position: center;
}
.works-area ul li .works-item-name{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px;
    background-color: #fff;
    box-sizing: border-box;
}

.works-area ul li:hover a div {
    background-color: #333333;
    color: #fff;
}

.works-area ul li a {
    cursor: pointer;
}

/* リンクなし（-no-linkクラスが付いたdiv）の方はホバーしても何も起きない */
.works-area ul li .works-item.-no-link {
    cursor: default;
}

/* 7つ周期の5, 6, 7番目の中にある画像を指定 */
.works-area ul li:nth-child(7n+5) img,
.works-area ul li:nth-child(7n+6) img,
.works-area ul li:nth-child(7n) img {
    min-height: 250px;
    object-fit: cover;
    object-position: center;
}


@media screen and (max-width: 768px) {
    /* 1. 全体レイアウトのリセット */
    .works-area ul {
        display: flex;
        flex-direction: column; 
        gap: 40px; /* アイテムごとの縦の隙間 */
    }

    /* 全てのliを100%幅に強制し、PC版のボーダー等をリセット */
    .works-area ul li,
    .works-area ul li:nth-child(7n+5),
    .works-area ul li:nth-child(7n+6),
    .works-area ul li:nth-child(7n) { 
        width: 100% !important;
        border-top: none !important;
        padding-top: 0 !important;
    }

    /* 2. Flex（横並び）にする対象の指定 */
    .works-area ul li:nth-child(7n+2) .works-item,
    .works-area ul li:nth-child(7n+4) .works-item,
    .works-area ul li:nth-child(7n+5) .works-item,
    .works-area ul li:nth-child(7n+6) .works-item,
    .works-area ul li:nth-child(7n) .works-item {
        display: flex;
        align-items: flex-start; /* 青線を揃えるため上揃え */
        gap: 15px;
    }

    /* 3. 左右交互（反転）の設定 */
    /* セット内の2番目(4)と4番目(6)を右画像にする */
    .works-area ul li:nth-child(7n+4) .works-item,
    .works-area ul li:nth-child(7n+6) .works-item {
        flex-direction: row-reverse;
    }

    /* 4. 画像のサイズ調整（画像大きめ：60%） */
    .works-area ul li:nth-child(7n+2) img,
    .works-area ul li:nth-child(7n+4) img,
    .works-area ul li:nth-child(7n+5) img,
    .works-area ul li:nth-child(7n+6) img,
    .works-area ul li:nth-child(7n) img {
        width: 60% !important; /* 画像を大きく */
        height: auto !important;
        min-height: auto !important;
    }

    /* 5. テキストエリアの調整（文字小さめ：40%） */
    .works-area ul li:nth-child(7n+2) .works-item div,
    .works-area ul li:nth-child(7n+4) .works-item div,
    .works-area ul li:nth-child(7n+5) .works-item div,
    .works-area ul li:nth-child(7n+6) .works-item div,
    .works-area ul li:nth-child(7n) .works-item div {
        width: 40% !important;
        position: static !important; /* absolute解除 */
        padding: 8px 0 0 !important; /* 青線と文字の間の余白 */
        background-color: transparent !important; /* 背景白を透過 */
        border-top: 3px solid #00a5e5 !important; /* テキストの幅に合わせて青線 */
    }

    /* 反転した時のテキストの文字揃え調整（任意） */
    .works-area ul li:nth-child(7n+4) .works-item div,
    .works-area ul li:nth-child(7n+6) .works-item div {
        text-align: left; /* 必要に応じて右揃えならright */
    }

    .works-area ul li .works-item-name{
        background-color: #fff;
    }
    .works-area ul li .works-item-name p{
        font-size: 12px;
    }
}
/* ======================================
    .news-area
====================================== */
.news-area ul{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    margin: 50px auto;
}
.news-area ul li{
    background-color: #fff;
}
.news-area ul li p.date{
    padding: 20px 20px 0;
    font-size: 14px;
}
.news-area ul li p.title{
    padding: 0 20px 20px;
    font-weight: bold;
}

@media screen and (max-width: 1024px) {
  .news-area ul li{
    width: calc(100% / 3 - 20px);
  }
}

@media screen and (max-width: 768px) {
    .news-area ul{
        flex-wrap: wrap;
    }
    .news-area ul li{
        width: 100%;
        background: transparent;
    }

    .news-area ul li a {
        display: flex;
        align-items: normal;
        gap: 10px;              
        text-decoration: none;
        margin-bottom: 20px;     
    }

     .news-area ul li a img{
        width: 100%;
        max-width: 45%;
        width: 30%;
        box-sizing: border-box;
        background-color: #fff;
        padding: 10px;
        object-fit: cover;
     }


    .news-area .news-text-content{
        background-color: #fff;
        width: 100%;
    }



}

/* ======================================
    about-area
====================================== */
.about-area h2{
    margin-bottom: 40px;
}
.about-area dl{
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}
.about-area dl dt{
    color: #fff;
    padding: 5px 10px;
    background-color: #00a5e5;
    width: 20%;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    max-height: 30px;
}

.about-area dl dd{
    border-bottom: 1px solid #626262;
    width: 80%;
    padding-left: 10px;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: 0.05em;
    background-color: #fff;
}
.about-area .only-dd dd{
    width: 100%;
    padding: 5px 20px 10px;
}

@media screen and (max-width: 768px) {
    
    .about-area dl dt{
        font-size: 12px;
        padding: 5px;
        max-height: max-content;
    }
}


/* ======================================
   .contact-area
====================================== */
.contact-area{
    margin:0 0 160px ;
}
.contact-area p{
    margin: 40px auto;
}

.contact-area a{
    bottom: -50px;
}

/* ======================================
   map-area
====================================== */
.map-area iframe{
    width: 100%;
    filter: grayscale(100%);
}



/* ======================================
    footer
====================================== */
footer {
    padding: 60px 60px 0;
    background-color:#333333 ;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

footer ul li{
    color: #fff;
    font-size: 48px;
    width: 300px;
    position: relative;
    z-index: 1; 
}

footer ul li:after{
    content: "";
    height: 8px;
    background: linear-gradient(#00a5e5 60%, #00a5e5 60%);
    width: 100%;
    position:absolute;
    bottom: 10px;
    left: 0;
    z-index: -1;
}

footer div{
    width: 300px;
}
footer div img{
    filter: brightness(0) invert(1);
    max-width: 500px;
}

small{
    display: flex;
    width: 100%;
    justify-content: right;
    color: #fff;
    font-size: 12px;
    padding: 10px 0;
    background-color:#333333 ;
    padding: 10px 60px;
}

@media screen and (max-width: 768px) {
    footer{
        padding: 30px 30px 0;
        flex-wrap: wrap;
        justify-content: center;
        gap: 50px;
    }
    footer ul{
        width: 100%;
        display: flex;
        flex-wrap: wrap;   
        gap: 10px;
        align-items: center;
        justify-content: space-between;
     }
     footer ul li{
        width: 45%;
        font-size: 23px;
     }
     small{
        justify-content: center;
        padding-top: 30px;
     }
}


/* ======================================
    ぱんくず
====================================== */
.p-breadcrumbs {
    font-size: 12px;
    max-width: 1255px;
    margin: 0 auto;
    width: 90%;
    padding: 20px 0; 
}

.p-breadcrumbs ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
}

.p-breadcrumbs li {
    display: flex;
    align-items: center;
    line-height: 180%;
}

.p-breadcrumbs li:not(:last-child)::after {
    content: ">";
    margin-left: 10px;  
    margin-right: 10px;  
    margin-bottom: 2px;
    color: #ccc;      

}

.p-breadcrumbs a {
    text-decoration: none;
    color: #333;
}

.p-breadcrumbs a:hover {
    text-decoration: underline;
}

.p-breadcrumbs li:last-child {
    color: #00a5e5;
    font-weight: bold; 
    pointer-events: none; 
}
/* ======================================
    news一覧ページ
====================================== */
.page-news{
    max-width: 1200px;
    margin: 80px auto;
}

.page-news h1 {
  margin: 0px 0 80px;
  font-size: 32px;
  font-weight: bold;
  display: inline-block; 
  padding: 0 20px; 
  text-align: center;
}

.page-news h1 span {
  font-size: 16px;
  display: block;
  text-align: center;
  position: relative;
  margin-left: -20px; 
  margin-right: -20px;  
  padding-top: 10px;
  font-weight: normal;
}

.page-news h1 span::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; 
  height: 5px;
  background-color: #00a5e5;
  border-radius: 5px;
}

.page-news ul li a{
    border-bottom: 1px solid #00a5e5;
    padding: 10px;
    display: flex;
    gap:20px;
}

.page-news ul li .date{}
.page-news ul li .title{
    font-weight: bold;
}

@media screen and (max-width: 768px) {
    .page-news{
        width: 90%;
    }
}
/* ======================================
    news詳細ページ
====================================== */
.page-detail h1{
    font-size: 24px;
    border-bottom: 1px solid #00a5e5;
    padding: 10px;
}
.page-detail .date{
    padding: 10px;
    text-align: right;
    font-size: 12px;
}
.page-detail .backbtn{
    text-align: center;
    margin: 80px auto 60px;
}

.page-detail .btn-common{
    position: relative;
}

.post-content{
    width: 90%;
    margin: 0 auto;
}

/* ======================================
    お問い合わせ
====================================== */
.snow-monkey-form{
    border-top:2px solid #00a5e5;
    padding: 10px 0;
}

.smf-item {
    display: flex;
    flex-wrap: wrap; 
    margin-bottom: 20px; 
    align-items: flex-start;
    gap: 20px;
    font-size: 14px;
    border-bottom: 1px solid #fff;
    padding-bottom: 10px;
}

.smf-item__col--label {
    flex: 0 0 200px;
    max-width: 200px;
    background-color: #fff;
    text-align: center;
    padding: 10px;
}

.smf-item input{
    width: 100%;
}
.smf-item__col--controls {
    flex: 1; 
}

.smf-button-control__control{
    border-radius: 50%!important;
    border: 3px solid #00a5e5!important;
    background-color: #fff!important;
    width: 100px!important;
    height: 100px!important;
    display: flex!important;
    justify-content: center!important;
    align-items: center!important;
    position: absolute!important;
    left: 0!important;
    margin: 0 auto!important;
    right: 0!important;
    font-size: 14px!important;
    z-index: 1!important;
    letter-spacing: 0.1px!important;
}

@media screen and (max-width: 767px) {
    .smf-item {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        gap:0px;
    }
    .smf-item__col--label {
        flex: 0 0 auto;
        max-width: 100%;
        margin-bottom: 8px; 
        min-width: 200px;
    }
    .smf-item__col--controls{
        width: 100%;
    }

}


/**追加**/

.about-area a{
    padding: 3px 5px;
    background-color: #333333;
    color: #fff;
    font-size: 10px;
    margin-left: 10px;
    vertical-align: text-bottom;
}
@media screen and (max-width: 767px) {

    .about-area table{
        width: 100%;
    }

    .about-area td{
        width: 100%;
        display: block;
    }

    .about-area a[target="_blank"] {
        float: right;
        margin-left: 10px;
        margin-bottom: 10px;
        margin-right: 5px;
    }