/* --------------------------------------------------
Stylesheet: common.css
Description: サイト全体の共通スタイル
-------------------------------------------------- */
/* import */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

/* Minimal Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

img {
max-width: 100%;
height: auto;
display: block;
}

ul, ol {
list-style: none;
}

a {
text-decoration: none;
color: inherit;
}

.card{
border:none!important;
}

/* scroll margin */

[id] {
scroll-margin-top: 120px;
}

/* margin */

.mt-100{
margin-top:100px!important;
}

.mt-90{
margin-top:90px!important;
}

.mt-80{
margin-top:80px!important;
}

.mt-70{
margin-top:70px!important;
}

.mt-60{
margin-top:60px!important;
}

.mt-50{
margin-top:50px!important;
}

.mt-40{
margin-top:40px!important;
}

.mt-30{
margin-top:30px!important;
}

/* color */

.bg-white{
background:#FFF!important;
}

.bg-blue{
background:#0065B3!important;
}

.bg-light-blue{
background:#E7EFF2!important;
}

.bg-pink{
background:#E84C95!important;
}

/* btn */

.btn-area{
text-align:center;
}

.btn1 {
  position: relative;
  display: block;
  padding: 12px 24px;
  background-color: #007BCE;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
  border-radius: 30px;
  width: 350px;
  margin: 15px auto;
  text-align: center;
  transition: opacity 0.5s ease;

}

.btn1 .label {
  display: block;
}

.btn1 .arrow {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2em;
}

.btn1:hover {
opacity:0.5;
}

.btn2{
color:#0065B3;
border:solid 2px #0065B3;
}

.btn3{
color:#E84C95;
}

/* 共通 start */

body{
font-family: "Noto Sans JP", sans-serif;
font-size:16px;
line-height:1.8;
}

section{
position:relative;
padding:120px 0;
}

.section-title{
text-align:center;
}

.section-title h2{
font-weight:700;
color:#0065B3;
}

.font-tsukushi{
font-family: fot-tsukuardgothic-std, sans-serif!important;
font-weight:600;
}

/* 白枠コンテンツ */

.top-sec01-content-wapper,
.landbuilin-sec03-1-inner,
.landbuilin-sec01-wapper,
.works-sec01-wapper,
.voice-sec01-wapper,
.facil-hel-inner,
.corpgovcollab-inner{
background:#FFF;
border-radius: 5px;
box-shadow: 6px 6px 6px 0px rgb(217 209 209 / 45%);
}

.sp-only{
display:none;
}

/* navbar */

/* ベーススタイル */
.custom-toggler .navbar-toggler-icon {
background-image: none;
position: relative;
width: 25px;
height: 2px;
background-color: #FFF;
transition: background-color 0.3s ease;
}

.custom-toggler .navbar-toggler-icon::before,
.custom-toggler .navbar-toggler-icon::after {
content: "";
position: absolute;
left: 0;
width: 25px;
height: 2px;
background-color: #FFF;
transition: transform 0.3s ease, top 0.3s ease, bottom 0.3s ease;
}

.custom-toggler .navbar-toggler-icon::before {
top: -10px;
}

.custom-toggler .navbar-toggler-icon::after {
bottom: -10px;
}

/* 開いたとき（collapsed が外れた状態）に ✕ に変形 */
.custom-toggler:not(.collapsed) .navbar-toggler-icon {
background-color: transparent;
}

.custom-toggler:not(.collapsed) .navbar-toggler-icon::before {
top: 0;
transform: rotate(45deg);
}

.custom-toggler:not(.collapsed) .navbar-toggler-icon::after {
bottom: 0;
transform: rotate(-45deg);
}

.navbar-toggler {
border: none;
border-radius:unset;
box-shadow: none !important;
position: absolute;
padding: 29px 27px 34px;
right: 0;
top: 0;
background:#0065B3;
}

.navbar-toggler:focus {
box-shadow: none !important;
}

.navbar {
padding:0!important;
}

.navbar .container{
padding:25px 0;
}

.navbar-nav li{
border-left:solid 1px #CCC;
padding:0 15px;
}

.navbar-expand-lg .navbar-nav .nav-link{
font-weight:700;
}

.navbar-nav li:last-child{
border-right:solid 1px #CCC;
}


/* contact */

.contact-content-wapper{
padding:40px;
text-align:center;
color:#FFF;
border-radius: 5px;
box-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.3);
}

/* footer */

.footer-content-wapper{
padding:80px 0;
}

.footer-content-wapper ul li a{
font-size:0.9rem;
color:#FFF;
transition: opacity 0.3s ease;
}

.footer-content-wapper ul li a::before {
font-family: "bootstrap-icons";
content: "\f285"; /* bi-chevron-right */
display: inline-block;
margin-right: 0.5em;
font-size: 0.9em;
vertical-align: middle;
}

.footer-content-wapper ul li a:hover{
opacity:0.7;
}

.copyright-wapper{
padding:20px 0 10px;
background:#D1E2F2;
}

.copyright-wapper p{
font-size:0.8rem;
text-align:center!important;
}

/* sp 追従btn */

.sp-fixed-btn{
position: fixed;
bottom: 0;
width: 100%;
}

.sp-fixed-btn a{
font-weight:700;
line-height:1.3;
}

.sp-fixed-btn i{
font-size:1.4rem;
}

.sp-fixed-btn-left{
color:#FFF;
background:#0974B9;
text-align:center;
}

.sp-fixed-btn-right{
color:#FFF;
background:#E84C95;
}

.sp-fixed-btn-left,
.sp-fixed-btn-right {
display: flex;
justify-content: center;
align-items: center;
}

.btn-link {
display: flex;
align-items: center;/* アイコンと文字の縦位置を揃える */
justify-content: center;/* 全体を中央寄せ */
height: 100%;
width: 100%;
text-decoration: none;
padding: 10px 0;
gap: 6px; /* アイコンと文字の間に余白 */
}

/* 共通 end */

/* header start */

header{
position: fixed;
z-index: 10;
width: 100%;
top:0;
transition: box-shadow 0.3s ease;
}

header.scrolled {
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

header .navbar-brand{
margin-left:20px;
}

header .navbar-brand img{
width:220px;
}

.contact-link-wapper a{
color:#FFF;
width:200px;
height:100%;
display:block;
text-align:center;
padding:20px 0;
line-height:1.4;
font-weight:700;
background:#E84C95;
transition: color 0.3s ease, background-color 0.3s ease;
}

.contact-link-wapper a:hover{
color:#FFF;
background:#016EB3;
}

/* header end */

/* ########################
 * Responsive design CSS
 * ######################## */

@media (max-width: 1199.98px) {
.navbar-nav li{
padding:0 5px;
}
.navbar .container-fluid{
padding:20px 0;
}
}

@media (max-width: 991.98px) {

.navbar{
padding:0;
}

.navbar-nav {
margin-top:45px;
}

.navbar-nav li{
border-left:none;
border-right:none!important;
border-top:solid 1px #0974B9;
padding:0;
}

.navbar-nav li:last-child{
border-bottom:solid 1px #0974B9;
}

.navbar-nav li a{
position: relative;
padding:12px 15px;
color:#0974B9;
transition: background-color 0.3s ease, color 0.3s ease;
}

.navbar-nav li a:after {
content: "\f285";
font-family: "bootstrap-icons";
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
font-size: 0.9em;
transition: transform 0.3s ease;
}

.navbar-nav li a:hover{
background:#0974B9;
color:#FFF;
}

.contact-link-wapper{
display:none;
}
}

@media (max-width: 767.98px) {

.sp-only{
display:block;
}

.pc-only{
display:none;
}

section,.footer-content-wapper{
padding:60px 0;
}

header .navbar-brand img{
width:170px;
}

.navbar .container-fluid{
padding:13px 0;
}

.navbar-toggler{
padding: 18px 27px 24px;
}

.footer-content-wapper img{
width:70%;
margin:0 auto;
}

.copyright-wapper{
padding:20px 0 60px;
}
[id] {
scroll-margin-top:85px;
}
}

@media (max-width: 575.98px) {

p{
font-size:0.9rem;
text-align:left;
}

.navbar-nav{
margin-bottom:0!important;
}

.navbar .container{
padding:20px 0;
}

.drawer-open .navbar .container-fluid{
padding:20px 0 0;
}

.btn1{
width:98%;
font-size:3.5vw;
}

.section-title h2{
font-size:6vw;
}

.contact h2{
font-size:5.6vw;
}

.footer-content-wapper ul{
padding-left:5px;
}

.footer-content-wapper ul li a{
font-size:0.8rem;
}
}

