@charset "UTF-8";

/* Reset
------------------------------------------------------------*/
*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;

    scroll-behavior: smooth;

    font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;

    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
    color: #333;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    word-wrap: break-word;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,input,textarea,p,blockquote,th,td {margin: 0;padding: 0; line-height: 1.75;}
address,em { font-style: normal; }
th { font-weight: normal; }
table {
border-collapse: collapse;
border-spacing: 0;
}
th { text-align: left; }
hr,legend { display: none;	}
h1,h2,h3,h4,h5,h6 { font-size: 100%; font-weight: normal;}
img,fieldset { border: 0; width: 100%;}
li { list-style-type: none; }

.text-center{text-align: center;}

svg{font-size: inherit; vertical-align: -.125em; width: 1em; height: 1em; fill: currentColor;}

/* フェードイン
------------------------------------------------------------*/
@keyframes fadeIn { from { opacity:0; transform:translateY(4rem) scale(0.98) rotateX(10deg); filter:blur(4px); } to { opacity:1; transform:translateY(0) scale(1) rotateX(0deg); filter:blur(0); } }
.fadein { view-timeline-name: --fadeTimeline; view-timeline-axis: block; animation: fadeIn 1.2s ease-out both; animation-timeline: --fadeTimeline; animation-range: entry 0% cover 30%; }


/* Fonts
------------------------------------------------------------*/
.montserrat { font-family: "Montserrat", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal;}
.quicksand { font-family: "Quicksand", sans-serif; font-optical-sizing: auto; font-weight: 600; font-style: normal; letter-spacing: 1.5px;}
.zen-maru-gothic-regular { font-family: "Zen Maru Gothic", sans-serif; font-weight: 700; font-style: normal;}


/* header
------------------------------------------------------------*/
header{padding-inline: 5%; transition: all .3s ease; position: fixed; width: 100%; padding: 40px 5%; z-index: 100;}
#site-header.scrolled{backdrop-filter: blur(10px); padding: 1rem 5%; background: rgba(255, 255, 255, 0.7); box-shadow: 0 0 8px #ddd;}
.header-wrapper,.header-wrapper ul{display: flex; justify-content: space-between;}
.header-wrapper{max-width: 1200px; margin: auto; align-items: center;}
.logo{width: 300px;}
.gnav{gap: 20px;}
.utility{gap: 20px;}
.utility-list a{font-size: 12px;}
.sns{gap: 5px;}
.sns li{width: 16px; position: relative;}
.sns li img{position: absolute; top: 50%; transform: translateY(-50%);}
header a{text-decoration: none;}

/* メッセージコンテナ */
.sliding-message-container { position: fixed; bottom: 0; left: 0; width: 100%; background-color: #00A6B9; overflow: hidden; white-space: nowrap; z-index: 1; display: flex; align-items: center; padding: 10px 0;}
/* 閉じるボタン */
.close-button { position: sticky; left: 15px; border: none; border-radius: 50%; width: 28px; height: 28px; font-size: 18px; cursor: pointer; z-index: 1001; flex-shrink: 0; display: flex; align-items: center; justify-content: center; margin-right: 15px; transition: all 0.2s;}
.close-button:hover { background: #ddd; transform: scale(1.05);}
/* スライディングメッセージ */
.sliding-message { display: inline-block; animation: slide 30s linear infinite;}
.sliding-message p,.sliding-message strong,.sliding-message a { display: inline-block; margin: 0; padding: 0 10px; color: #212529; font-size: 14px; color: #fff;}
/* アニメーション */
@keyframes slide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-25%);
  }
}
/* 閉じた状態 */
.sliding-message-container.closed {
  display: none;
}

/* ハンバーガー */
.hamburger{display:none;flex-direction:column;justify-content:space-between;width:30px;height:20px;cursor:pointer;z-index:1001;}
.hamburger span{display:block;width:100%;height:2px;background:#333;transition:all .3s ease;}

/* ナビゲーション */
.gnav-wrapper{display:flex;align-items:center;gap:20px 150px;}
.gnav,.utility{display:flex;list-style:none;gap:20px;}
.sns{display:flex;gap:5px;}
.sns li{width:16px;position:relative;}
.sns li img{position:absolute;top:50%;transform:translateY(-50%);}
.gnav a,.utility-list a{transition: all .3s ease;}
.gnav a:hover,.utility-list a:hover{color: #00A6B9; position: relative;}
.gnav a:hover::after,.utility-list a:hover::after{content: ''; position: absolute; bottom: -7px; height: 1px; background-color: #00A6B9; width: 100%; left: 0;}

/* ヘッダー上部余白 */
main{padding-top: 150px;}


/* main
-----------------------------------------------------------*/
.wrapper{max-width: 1200px; margin: auto; position: relative;}
.wrapper880{max-width: 880px; margin: auto; position: relative;}

.title-box{margin-bottom: 30px;}
.title{display: inline-block; font-size: 1.8rem; font-weight: bold; letter-spacing: 2px;  color: #00A6B9; position: relative;}
.title::after{content: ''; position: absolute; top: 0; right: -10px; width: 5px; height: 5px; border-radius: 100vh; background: #BA4F00;}
.title-en{color: #bcbcbc; letter-spacing: 1px;}

.sec-title{padding: 20px; border-top: 2px solid #00A6B9; background-color: #F2F8F8; margin-block: 30px; font-size: 1.2rem;}
.sec-title::before{font-family: "Font Awesome 6 Free"; font-weight: 900; content: "\f192"; color: #1F717A; margin-right: 15px;}

.sec-ttl{padding: 20px; font-size: 1.2rem;}
.sec-ttl::before{font-family: "Font Awesome 6 Free"; font-weight: 900; content: "\f192"; color: #1F717A; margin-right: 15px;}

/* ボタン */
.btn{display: block; background: #fff; padding: 1.5rem 2.5rem; border: 1px solid #333; border-radius: 8px; width: 300px; text-decoration: none; position: relative; transition: all .3s ease;}
.btn::after{content: ""; display: inline-block; width: 16px; height: 16px; background: no-repeat center/contain url('../img/arrow-right-line.svg'); position: absolute; right: 2.5rem; top: 50%; transform: translateY(-50%); transition: all .3s ease;}
.btn:hover{background: #00A6B9; color: #fff; font-weight: bold;}
.btn:hover::after{background-image: url("../img/arrow-right-line_w.svg");}

/* footer
-----------------------------------------------------------*/
footer{background: #F2F8F8 no-repeat right -10% bottom -150% / auto 80% url("../img/footer_bg.svg")}
.banner-area{display: flex; justify-content: space-between; gap: 40px; padding-block: 80px;}
.banner-area a{position: relative; display: block; line-height: 0; font-size: 0;}
.banner-area .banner img {
	transition: opacity 0.3s ease;
	display: block;
}

.banner-area .banner:hover img {
	opacity: 0.6; /* 0.0 = 完全透明, 1.0 = 不透明 */
}
.banner-area a::after{content: ''; position: absolute; width: 40px; height: 40px; border-radius: 15px 0 15px 0; background: no-repeat center/18px auto url("../img/arrow-right-line_w.svg"); right: 0; bottom: 0;}
.banner-area a:nth-child(1)::after{background-color: #00A6B9;}
.banner-area a:nth-child(2)::after{background-color: #1F717A;}

.footer-utility{display: flex; justify-content: space-between; gap: 40px; padding-bottom: 40px; transition: padding-bottom 0.3s ease;}
.footer-utility-left{width: 40%; border-top: thin solid #bcbcbc; border-right: thin solid #bcbcbc; border-radius: 0 15px 0 0; padding: 200px 10% 40px 5%; position: relative;}
.footer-utility-left-wrapper{position: absolute; left: 20%; bottom: 40px;}

.footer-utility-right{width: 100%;}
.footer-utility-right-bottom{padding: 40px 20px; border-top: thin solid #bcbcbc;}

.footer-links {border-top: thin solid #bcbcbc; display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; padding: 40px 20px;}
.footer-column h4 { font-size: 1rem; color: #00A6B9; margin-bottom: 1rem; font-weight: bold;}
.footer-column ul {list-style: none;padding: 0;margin: 0;}
.footer-column ul li { margin-bottom: 0.75rem; position: relative; padding-left: 1em;}
.footer-column ul li::before { font-family: "Font Awesome 6 Free"; font-weight: 900; content: "\f054"; position: absolute; left: 0; top: 50%; transform: translateY(-50%); color: #1F717A; font-size: 0.8em;}
.footer-column ul li a { text-decoration: none; color: #707070; transition: color 0.2s;}
.footer-column ul li a:hover {color: #00A6B9;}

.footer-utility-right-bottom,.footer-utility-right-bottom-left,.footer-sns{display: flex; justify-content: space-between; align-items: center;}
.footer-utility-right-bottom-left{gap: 30px;}
.footer-sns{gap: 8px;}
.footer-sns-list a{display: block;}
.footer-sns-list a img{height: 20px;}

.footer-logo{width: 200px;}

.footer-address span{font-weight: normal;}
.access-map{color: #1F717A; font-weight: bold; position: relative; padding-left: 1.2rem;}
.access-map::before{content: ''; width: 14px; height: 14px; background: no-repeat center/contain url("../img/arrow-right-circle-line.svg"); position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
small{color: #A8A8A8; letter-spacing: 1px;}


.pagetop { height: 50px; width: 50px; position: fixed; right: 30px; bottom: 120px; background: #fff; border: solid 1px #000; border-radius: 50%; display: flex; justify-content: center; align-items: center; z-index: 2;}
.pagetop__arrow { height: 10px; width: 10px; border-top: 2px solid #000; border-right: 2px solid #000; transform: translateY(20%) rotate(-45deg);}


/* mobile
-----------------------------------------------------------*/
@media (max-width:768px){
    #site-header{z-index: 100;}
    .hamburger{display:flex;}
    .gnav-wrapper{position:fixed;top:0;right:-100%;width:85%;max-width:300px;height:100vh;background:#fff;flex-direction:column;padding:100px 20px 20px;transition:right .4s ease;z-index:1000;}
    .gnav{flex-direction:column;gap:0; width: 100%;}
    .nav-list{border-bottom:1px solid #f0f0f0; width: 100%;}
    .nav-list a{display: block; padding:15px 0;}
    .utility{flex-direction:column;padding-top:20px;width: 100%;}
    .utility-list{width: 100%;}
    .utility-list a{display: block; border: thin solid #333; padding: 1rem; border-radius: 8px; position: relative;}
    .utility-list a::after{content: ""; display: inline-block; width: 16px; height: 16px; background: no-repeat center/contain url('../img/arrow-right-line.svg'); position: absolute; right: 1rem; top: 50%; transform: translateY(-50%);}
    .sns{height: 16px; justify-content: center !important;}
    .gnav a:hover,.utility-list a:hover{color: #333; position: relative;}
    .gnav a:hover::after,.utility-list a:hover::after{display: none;}
    .logo{width: 220px;}

    .gnav-wrapper.active{right:0;box-shadow:-5px 0 15px rgba(0,0,0,.1);}
    .hamburger.active span:nth-child(1){transform:translateY(9px) rotate(45deg);}
    .hamburger.active span:nth-child(2){opacity:0;}
    .hamburger.active span:nth-child(3){transform:translateY(-9px) rotate(-45deg);}
    body.menu-open{overflow:hidden;}

    footer{background: #F2F8F8 no-repeat right 70% bottom -10% / auto 50% url("../img/footer_bg.svg");}
    .banner-area{flex-wrap: wrap; padding-inline: 5%;}
    .footer-utility{flex-wrap: wrap;}
    .footer-utility-left{width: 100%;}
    .footer-links{grid-template-columns: repeat(2, 1fr);}
    .footer-utility-right-bottom{flex-wrap: wrap; gap: 40px; justify-content: center;}
    .footer-address{padding-block: 7px; line-height: 1.8;}
    small{font-size: .8rem;}

    .pagetop{bottom: 40px; right: 5%;}

}