@charset "utf-8";
/*
Theme Name: master-template
Description: Description
Author: YUUGA FUJIKAWA
*/
@import url(css/reset.css);




/* Box sizing */
*,*::before,*::after{box-sizing:border-box}

/* Reset margin/padding */
body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,figure,figcaption,dl,dd{margin:0;padding:0}

/* Typography */
body{ font-family: 'Noto Sans JP', sans-serif; font-size: clamp(15px, 4vw, 16px);line-height:1.6;color:#333}
a{text-decoration:none;color:inherit}
a:hover{opacity:.8}
strong{font-weight:bold}
img{max-width:100%;height:auto;display:block}
b { font-weight: bold;}

/* Layout helpers */
.container{max-width:1200px;margin:0 auto;padding:0 16px}
.flex{display:flex}
.flex-center{justify-content:center;align-items:center}
.text-center{text-align:center}

/* font-size */
h1 { font-weight: 500; font-size: clamp(1.9rem, 4vw, 2.8rem); }
h2 { font-weight: 500; font-size: clamp(1.8rem, 3.5vw, 2.5rem); }
h3 { font-weight: 500; font-size: clamp(1.7rem, 3vw, 2rem); }
h4 { font-weight: 500; font-size: clamp(1.6rem, 2.5vw, 1.6rem); margin-bottom: 0.3em;}
h5 { font-weight: 500; font-size: clamp(1.5rem, 2vw, 1.4rem); }


@font-face { font-family: 'Ethnocentric'; src: url('./fonts/ethnocentric rg.ttf') format('woff2'); font-weight: 300; font-style: italic;}
/* Utility */
.hidden{display:none!important}
.mt-1{margin-top:1rem}
.mb-1{margin-bottom:1rem}
.p-1{padding:1rem}

/* Button */
.btn{display:inline-block;padding:.5em 1.2em;border:none;background:#333;color:#fff;border-radius:4px;cursor:pointer}
.btn:hover{background:#555}

/* Responsive image */
.responsive-img{width:100%;height:auto}

/* Section spacing */
section{ padding:4rem 0; position: relative;}
section .inner { max-width: 1100px; margin: 0 auto; padding-right: 0.8em; padding-left: 0.8em;}
section .inner > *:nth-child(n+2) { margin-top: 3em;}


:root {
  --blue: #01457C;
  --green: #60B52F;
  --red: #E60C10;
  --red-linear: linear-gradient(145deg, #E70713 20%,#EF8001 80%);
  --green-linear: linear-gradient(145deg, #F5B102 20%,#5EB734 80%);
  --orange-linear: linear-gradient(135deg, #fdf0cb 0%, #d6ebcc 100%);
  --pink-linear: linear-gradient(135deg, #fcd5d6 0%, #fde9d9 100%);;
}


.pc, .sp, .tb { display: none;}
@media screen and (min-width: 1080px) { .pc { display: block; }}
@media screen and (min-width: 768px) and (max-width: 1080px) { .tb { display: block; }}
@media screen and (max-width: 767px) { .sp { display: block; }}


.white { color: #fff;}
.green { color: var(--green);}
.red { color: var(--red);}

.bk-red { background: var(--red-linear);}
.bk-green { background: var(--green-linear);}
.bk-orange { background: var(--orange-linear);}
.bk-pink { background: var(--pink-linear);}

/* flex */
.flex-wrap { display: flex; gap: 3.5em;}
.flex-wrap .left , .flex-wrap .right { flex: 1;}

@media (max-width: 1080px) { 
  .flex-wrap { flex-direction: column; gap: 1.5em;}
}


/* style */
.alC { text-align: center;}
.line-high { line-height: 2.3;}

/* .section-title */
.section-title { position: relative; text-align: center; padding-bottom: 2rem;}
.section-title::after { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 200px; height: 30px; background: url('images/common/zigzag-lines.svg') no-repeat center; background-size: contain;}

/* Google Mapを囲う要素 */
.map { position: relative; width: 100%; height: 0; padding-top: 75%;}
.map iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}


/*  */
/* .btn-wrap */
/*  */
.btn-wrap {  margin-top: 2rem;}
.btn-wrap .custom-btn { display: inline-block; padding: 0.5em 2.5em 0.5em 1em; font-size: clamp(1.1em, 4vw, 1.2em); letter-spacing: 1px; background-color: #0C4D82; color: #fff; text-decoration: none; border-radius: 50px; font-weight: 500; max-width: 380px; transition: background-color 0.3s ease; width: fit-content; white-space: nowrap; position: relative;}
.btn-wrap .custom-btn:hover { background-color: #F07E00;}
.btn-wrap:has(.custom-btn:nth-child(2)) { display: flex; flex-direction: column; gap: 1em;}
.btn-wrap .custom-btn::after { content: "→"; font-size: 1em; position: absolute; right: 8%; top: 50%; transform: translateY(-50%); transition: transform 0.3s ease;}
.btn-wrap .custom-btn:hover::after { transform: translateY(-50%) translateX(5px);}

.btn-wrap .custom-btn.tell { width: 100%; text-align: center; padding: 0.5em 1.5em; justify-content: space-between; display: flex; letter-spacing: 1px;} 
.btn-wrap .custom-btn.tell::after { content: none;} 

/* 横並び */
.justify-content-center { justify-content: center; flex-direction: row !important; flex-wrap: wrap;}

/*  */
/* header */
/*  */
.site-header { background: linear-gradient(45deg, #fff 25%, var(--blue) 25%); height: 110px; display: flex; padding: 0 1em; position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; transition: top 0.4s ease;}
.site-header.hide { top: -110px;}
.header-inner { display: flex; justify-content: space-between; align-items: center; width: 1800px; margin: 0 auto; gap: 4em;}
.site-logo { flex: 1; height: 100%; display: flex; align-items: center;}
.site-logo img { height: 80px;}

@media (max-width: 1080px) { 
  .site-header { background: linear-gradient(45deg, #fff 100px, var(--blue) 25%); height: 70px;}
  .site-logo img { height: 50px;}
}


/*  */
/* footer-wrap */
/*  */
.footer-wrap { background-image: url(./images/front-page/swiper-slide_01.jpg); background-size: cover; background-position: center; }
.footer-wrap .company-hero { color: #0C4D82; text-shadow: 1px 1px 1px rgba(255, 255, 255, 1);}
.footer-wrap .company-hero h2 { font-weight: bold;}

.footer-wrap .info { margin-top: 4em;}
.footer-wrap .info .name { font-size: 1.8em; font-weight: 500;}
.footer-wrap .info .tel { font-size: 1.2em; font-weight: 500;}

/*  */
/* footer */
/*  */
.site-footer { background: linear-gradient(45deg, #fff 25%, var(--blue) 25%); position: relative; height: 110px; display: flex; padding: 0 1em;}
.header-inner { display: flex; justify-content: space-between; align-items: center; width: 1800px; margin: 0 auto; gap: 4em;}
.site-logo { flex: 1; height: 100%; display: flex; align-items: center;}
.site-logo img { height: 80px;}

@media (max-width: 1080px) { 
  .site-footer { background: linear-gradient(45deg, #fff 100px, var(--blue) 25%); height: 70px;}
  .site-logo img { height: 50px;}
}



/*  */
/* page-header */
/*  */
.page-header { background-image: url(./images/front-page/swiper-slide_01.jpg); background-size: cover; background-position: center; position: relative;     margin-top: 110px;}
.page-header h1{  position: relative; color: white; padding: 1.8rem; z-index: 1; overflow: hidden; line-height: 1; background: linear-gradient(to right, #01457C -10%, rgba(1, 69, 124, 0) 70% 70%);}

@media (max-width: 1080px) { 
  .page-header { margin-top: 70px;}
}

/* pc-nav */
.pc-nav { flex: 5;}
.pc-nav ul {  display: flex; gap: 3em; list-style: none; justify-content: center;}
.pc-nav li { position: relative;}
.pc-nav li:not(:last-child)::after { content: ""; position: absolute; right: -1.5em; top: 50%; transform: translateY(-50%) rotate(20deg); width: 1px; height: 1.2em; background-color: #fff; opacity: 0.5;}
.pc-nav li a { text-decoration: none; color: #fff; text-align: center; display: flex; flex-direction: column; font-weight: 500; font-size: 1.2em;}
.pc-nav li a span { color: #22C75B; font-size: 0.6em; font-family: var(--din);}

/* .menu-button */
.menu-buttons { display: flex;}
.menu-buttons a { color: #fff; padding: 2em 2em; line-height: normal; display: inline-block; font-size: 1.2em;}
.menu-buttons .orange { background: linear-gradient(45deg, #fc9535 0%, #fc7ba8 100%); }
.menu-buttons .green { background: linear-gradient(45deg, #22c75b 0%, #21c26b 61.08%, #1eb495 100%); }

/* ハンバーガー */
.sp-menu-toggle { display: none; flex-direction: column; gap: 4px; cursor: pointer;}
.sp-menu-toggle span { width: 25px; height: 3px; background: #fff;}

/* スマホナビ */
.sp-nav { display: none; background: var(--blue); padding: 20px; position: absolute; top: 99%; left: 0; width: 100%; z-index: 1000;}
.sp-nav ul { list-style: none; padding: 0; margin: 0; text-align: center;}
.sp-nav li { padding: 1em; font-weight: 500;}
.sp-nav li a { text-decoration: none; color: #fff;}

/* レスポンシブ切り替え */
@media (max-width: 1080px) { 
  .pc-nav { display: none; }
 .sp-menu-toggle { display: flex; }
}

/*  */
/* main-sec */
/*  */
.main-sec { background-image: url("./images/front-page/swiper-slide_01.jpg"); background-size: cover; background-position: center; margin-top: 110px;}
.main-sec::before { content: ""; position: absolute; inset: 0; background-image: url(./images/front-page/eco.png); background-size: 706px; background-position: right bottom; background-repeat: no-repeat; z-index: 1; width: 50%; margin-left: auto;}
.main-sec .inner { position: relative; z-index: 2;}
.main-sec .lead-text { background: linear-gradient(to right, #01457C -10%, rgba(1, 69, 124, 0) 70%70%); color: white; padding: 1.3rem 2rem;}
.main-sec .info-section { display: flex; gap: 2em; width: 80%;}
.main-sec .info-section .info-box { background-color: rgba(255, 255, 255, 0.7); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); flex: 1; border-radius: 15px;}
.main-sec .info-section .info-box h3 {  text-align: center; color: #fff; font-weight: bold; border-radius: 15px 15px 0 0; padding: 0.5em; font-size: clamp(18px, 4vw, 24px);}
.main-sec .info-section .info-box .body-wrap { padding: 1.1em; max-width: 500px; margin: 0 auto;}

@media (max-width: 1080px) { 
  .main-sec { margin-top: 70px; padding: 2em 0px;}
  .main-sec::before { width: 100%; background-size: contain;}
  .main-sec .info-section { flex-direction: column; width: 100%;}
}

.price-table { width: 100%;}
.price-table tr { display: flex; text-align: center; border-bottom: 1px solid #ccc;}
.price-table th { flex: 1; padding: 0.5em 1em; position: relative; font-weight: 500;}
.price-table td { flex: 1; padding: 0.5em 1em; position: relative; text-align: right;}
.price-table td:first-child::after { content: ""; position: absolute; top: 25%; bottom: 25%; right: 0; width: 1px; background-color: #ccc;}

/* 表示制御 */
.symbol { display: inline-block; margin-right: 0.25em; font-weight: bold; text-align: center; width: 1em;}
tr.up .symbol { color: red; }
tr.down .symbol { color: #0074c7; }
tr.neutral .symbol { color: #aaa; }

.info-hours {  font-weight: 500; line-height: 2; font-size: 1.2em;}
.update-date { text-align: right;}

/*  */
/* .map-sec  */
/*  */
.map-sec .title-padding h3 { padding: 0.5em; clip-path: polygon(100px 0%, calc(100% - 0px) 0%, 100% 0%, calc(100% - 100px) 100%, 0px 100%, 0% 100%);}
.map-sec .off-white { background-color: #fff; border-radius: 10px; font-size: 0.75em; padding: 0.2em 0.5em; margin: 1em 1em;}

@media (max-width: 1080px) { 
  .map-sec .title-padding h3 { clip-path: polygon(50px 0%, calc(100% - 0px) 0%, 100% 0%, calc(100% - 50px) 100%, 0px 100%, 0% 100%);}
}

.map-sec .access-box { text-align: center;}
.map-sec .access-box .tell { color: #0C4D82; font-size: clamp(1.4em, 4vw, 1.8em); font-weight: 500; margin-top: 0.5em; margin-bottom: 0.5em;}

.flow-wrap { display: flex; align-items: center; gap: 1em;}
.flow-wrap .flow-step { flex: 1;}
.flow-wrap .flow-step .image { width: 90%; margin: 0 auto;}
.flow-wrap .flow-step h5 { color: #438901; font-weight: 500; text-align: center; padding: 0.5em;}


@media (max-width: 1080px) { 
  .flow-wrap { flex-direction: column;}
  .flow-wrap .flow-arrow { display: none;}
}

/*  */
/* faq-list */
/*  */
.faq-list {}
.faq-list dl { margin-bottom: 2em; padding-bottom: 2em; border-bottom: 1px solid rgba(0, 0, 0, 0.1);}
.faq-list dt { position: relative; font-weight: bold; padding-left: 3em; margin-bottom: 1.5em; color: #E60C10; font-style: italic;}
.faq-list dt::before { content: "Q."; position: absolute; left: 0; top: -0.3em; color: #E60C10; font-family: 'Ethnocentric', sans-serif; font-style: italic; font-size: 1.8em;}
.faq-list dd { position: relative; padding-left: 3em; line-height: 1.8;}
.faq-list dd::before { content: "A."; position: absolute; left: 0; top: -0.3em; color: #438901; font-family: 'Ethnocentric', sans-serif; font-style: italic; font-size: 1.8em;}

/*  */
/* note-sec */
/*  */
.note-wrap { display: flex; gap: 3.5em; flex-wrap: wrap; align-items: center;}
.note-wrap .left { flex: 2;}
.note-wrap .right { flex: 4;}

@media (max-width: 1080px) { 
  .note-wrap { flex-direction: column; gap: 1.5em;}
  .note-wrap .left > img { width: 65%; margin: 0 auto;}
}

.note-wrap .news-list { display: flex; border-bottom: 1px solid rgba(0, 0, 0, 0.1);}
.note-wrap .news-list dt { padding: 1em 2em; color: #438901; font-weight: bold;}
.note-wrap .news-list dd { padding: 1em;}



/*  */
/* items-lead-sec */
/*  */
.items-lead-sec .note-box .note-header { background: var(--red-linear); color: #fff; text-align: center; font-size: 1.8em; padding: 0.3em;}

.items-lead-sec .note-box { border: 4px solid #EAEAEA;}
.items-lead-sec .note-box .note-list { list-style: none; width: fit-content; margin: 0 auto; padding: 1em;}
.items-lead-sec .note-box .note-list li { position: relative; padding-left: 1.5em; margin-bottom: 0.5em; font-size: 1.2em; font-weight: 500;}
.items-lead-sec .note-box .note-list li::before { content: ""; position: absolute; left: 0.5em; top: 0.6em; width: 0.6em; height: 0.6em; background-color: orange; border-radius: 50%;}
.items-lead-sec .note-box .note-footer { padding: 1em;}


/*  */
/* item-sec */
/*  */
.scrap-grid {}
.scrap-grid h4 { border-bottom: 3px solid #aaa; margin-bottom: 0.5em; padding-bottom: 0.2em;}
.scrap-grid .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;}
.scrap-grid .item img { width: 100%; height: 215px; object-fit: cover; display: block; border: 1px solid #ccc;}
.scrap-grid .item p { font-weight: bold; margin: 0.5rem 0; text-align: center;}
.scrap-grid .price { display: flex; justify-content: center; align-items: baseline; gap: 0.5rem; font-size: clamp(0.9em, 4vw, 1.2em); font-weight: bold; text-align: center;}
.scrap-grid .price .unit { font-size: 0.8rem; font-weight: normal; margin-left: 0.2rem;}
.scrap-grid .price.up { color: red; border-top: 3px solid red; padding-top: 0.3rem;}
.scrap-grid .price.down { color: #0074c7; border-top: 3px solid #0074c7; padding-top: 0.3rem;}
.scrap-grid .price.neutral { border-top: 1px solid #aaa; padding-top: 0.3rem;}
.scrap-grid .price.up .icon::before { content: "⬆ UP"; color: red;}
.scrap-grid .price.down .icon::before { content: "⬇ DOWN"; color: #0074c7;}
.scrap-grid .price.neutral .icon::before { content: "-"; color: #aaa;}

@media (max-width: 1080px) { 
  .scrap-grid .item img { height: 125px;}
  .scrap-grid .grid { grid-template-columns: repeat(2, 1fr); gap: .5rem;}
}


/*  */
/* .company-profile-sec */
/*  */
.company-profile table { width: fit-content; margin: 0 auto; font-size: 0.95em; line-height: 1.5em;}
.company-profile table th { padding: 1em;     width: 30%; font-weight: bold;}
.company-profile table td { padding: 1em;}

@media (max-width: 1080px) { 
.company-profile table th { padding: 0.5em;}
.company-profile table td { padding: 0.5em;}
}

/*  */
/* archive-news */
/*  */

.single-news-sec {}
.single-news-sec .inner {}
.news-article { background: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);}
.news-title { font-size: 1.75rem; font-weight: bold; margin-bottom: 10px; color: #222; line-height: 1.4;}
.news-date { font-size: 0.95rem; color: #888; margin-bottom: 20px; display: block;}
.news-content { font-size: 1rem; line-height: 1.8; color: #444;}
.news-content p { margin-bottom: 1.2em;}