/************************************************************************************
RESET
*************************************************************************************/
*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

img, fieldset {
	border: 0;
}

/* set image max width to 100% */
img {
	max-width: 100%;
	height: auto;
	width: auto\9; /* ie8 */
}

/* set html5 elements to block */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
    display: block;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
fieldset,img { 
    border:0;
}
ol,ul {
    list-style:none;
}
caption,th {
    text-align:left;
}
h1,h2,h3,h4,h5,h6 {
    font-size:100%;
    font-weight:normal;
}
q:before,q:after {
    content:'';
}
abbr,acronym { border:0;}
button {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}
/* Override default iOS blue styling on tel: links */
a[href^="tel"] {
  color: inherit !important;         /* Use your desired color instead of blue */
  text-decoration: none !important;  /* Remove underline if needed */
  font-weight: inherit !important;
}

/********************************************************************************
FONTS
*********************************************************************************/

@font-face{
  font-family: HiraKakuProN-W3;
  src: url('../fonts/Hiragino-Kaku-Gothic-ProN-W3.otf');
}

.noto-sans-jp-regular {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
.zen-maru-gothic-light {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 300;
  font-style: normal;
}
.zen-maru-gothic-regular {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.zen-maru-gothic-medium {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 500;
  font-style: normal;
}
.zen-maru-gothic-bold {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-style: normal;
}
.zen-maru-gothic-black {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 900;
  font-style: normal;
}
.inter-regular {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;  
}

/**Source Han Sans JP Regular**/
.source-han-sans-jp-regular{
  font-family: "source-han-sans-japanese", sans-serif;
  font-weight: 400;
  font-style: normal;
}

/**Source Han Sans JP Bold**/
.source-han-sans-jp-bold{
  font-family: "source-han-sans-japanese", sans-serif;
  font-weight: 700;
  font-style: normal;
}

/**Brandon Grotesque Light**/
.brandon-grotesque-light{
  font-family: brandon-grotesque, sans-serif;
  font-weight: 300;
  font-style: normal;
}

/**Brandon Grotesque Regular**/
.brandon-grotesque-regular{
  font-family: brandon-grotesque, sans-serif;
  font-weight: 400;
  font-style: normal;
}

/**Brandon Grotesque Medium**/
.brandon-grotesque-medium{
  font-family: brandon-grotesque, sans-serif;
  font-weight: 500;
  font-style: normal;
}

/**Brandon Grotesque Bold**/
.brandon-grotesque-bold{
  font-family: brandon-grotesque, sans-serif;
  font-weight: 700;
  font-style: normal;
}


/************************************************************************************
GENERAL STYLING
*************************************************************************************/
html, body {
  max-width: 100%;
  overflow-x: hidden;
}
html{
  scroll-behavior: smooth;
}
body{
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    color: #333333;  
    background-color: #ffffff; 
}
.container{
    max-width: 1440px;
    padding-inline: 170px;
    margin: 0 auto;
}

/************************************************************************************/

/***********************Header Area****************************/

header .header-section{
  background-color: #141431;
  min-height: 112.5px;
  padding-inline: 28px 80px;
}
.header-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}
.header-section .navigation{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 38px;
}
.header-section .navigation li a{
    text-decoration: none;
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.05rem;
}
.cta-btn {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 203px;
  height: 54px;
  border: none;
  border-radius: 999px; /* fully rounded */
  background: linear-gradient(
    135deg,
    #0177C1,
    #0097F7,
    #0099F9
  );
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 0 rgba(3, 101, 162, 1);
  transition: all .5s ease-in;
}

.cta-btn:hover {
  background: linear-gradient(
    -135deg,
    #0177C1,
    #0097F7,
    #0099F9
  );
  transition: all .5s ease-out;
}


/**************************************************************/
.banner-section{
    position: relative;
}
.banner-section img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 1440 / 680;
}

.banner-btn {
    position: absolute;
    z-index: 1;         /* 追加 */
    overflow: visible; /* 追加 */
    /* left: 82px;
    bottom: 123px; */
    left: 5.6944vw;
    bottom: 8.5416vw;
    display: table;
    margin: 0 auto;
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, #0177C1, #0097F7, #0099F9);
    text-decoration: none;
    color: #fff;
    /* font-size: 28px; */
    font-size: 1.9444vw;
    font-weight: 900;
    letter-spacing: 0.05rem;
    cursor: pointer;
    transition: all .5s ease-in;
    /* width: 582px;
    height: 65px; */
    width: 40.4166vw;
    height: 4.513888888888889vw;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.banner-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: linear-gradient(
        135deg,
        rgba(1,119,193,1),
        rgba(0,151,247,1),
        rgba(0,153,249,1)
    );
    z-index: -1;
    animation: bannerGlow 1.6s ease-out infinite;
}

@keyframes bannerGlow {
    0% {
        transform: scale(0.95);
        opacity: 0.8;
    }
    100% {
        transform: scale(1.25, 1.45);
        opacity: 0;
    }
}

.banner-btn:after {
    content: '';
    background-image: url(../images/arrow-right.svg);
    /* width: 45px;
    height: 17px;  */
    width: 3.125vw;
    height: 1.1805vw;
    position: absolute;
    /* right: 118px; */
    right: 7.1944vw;
    top: 50%;
    transform: translateY(-50%);
    padding-bottom: 8.5px;
    background-repeat: no-repeat;
    background-size: contain;
    animation-delay: .8s;
}
/*.banner-btn:hover {
    background: linear-gradient(
      -135deg,
      #0177C1,
      #0097F7,
      #0099F9
    );
    transition: all .5s ease-out;
}*/

a.dropdown-mobile-nav{
    display: none;
}

.section-one-container{
    padding-block: 60px 34px;
}
.section-one-container .btn {
    display: table;
    margin: 0 auto;
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, #0177C1, #0097F7, #0099F9);
    text-decoration: none;
    color: #fff;
    font-size: 28px;
    font-weight: 900;
    letter-spacing: 0.05rem;
    cursor: pointer;
    transition: all .5s ease-in;
    width: 560px;
    height: 85px;
    text-align: center;
    padding-block: 10px;
    position: relative;
    margin-bottom: 32px;
}
.section-one-container .btn:after {
    content: '';
    background-image: url(../images/arrow-right.svg);
    width: 45px;
    height: 17px; 
    position: absolute;
    right: 28px;
    top: 50%;
    transform: translateY(-50%);
    padding-bottom: 8.5px;
    background-repeat: no-repeat;
}

.section-one-container .btn:hover {
    background: linear-gradient(
      -135deg,
      #0177C1,
      #0097F7,
      #0099F9
    );
    transition: all .5s ease-out;
}
.section-one-container .btn span.small{
    font-size: 16px;
    display: block;
    margin-bottom: -3px;
}
.section-one-container .btn span.union {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.05rem;
    position: absolute;
    left: -12px;
    bottom: 27px;
    width: 81px;
    height: 80px;
}
.section-one-container .btn span.union img{
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
}
.section-one-container .btn span.union .union-text {
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.section-one-container .section-one-inner{
    padding-inline: 83px;
    font-size: 12px;
}
.section-two-dropdown-item{
    background-color: #F7EEAD;   
}
.section-two-dropdown-item a.dropdown-mobile-nav{
    margin: 0 auto;
}
.section-two-dropdown-item .a.dropdown-mobile-nav.section-two-container-nav{
     margin: 0;
}
.section-two-container{
    background-color: #F7EEAD;
    padding-block: 120px 80px;
}
.section-boxes{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;    
}
.section-boxes .box{
    background-color: #ffffff;
    border-radius: 8px;
    padding: 24px;
    position: relative;    
}
.section-boxes .box .box-img{
    aspect-ratio: 308 / 202;
}
.section-boxes .box .box-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.section-boxes .box .box-number {
    font-family: brandon-grotesque, sans-serif;
    font-weight: 700;
    font-style: normal;
    color: #C4AE62;
    font-size: 32px;
    line-height: 1;
    letter-spacing: 0.15rem;
    position: absolute;
    left: 50%;
    top: -40px;
    transform: translateX(-50%);
    background-color: #ffffff;
    border-radius: 100%;
    width: 78px;
    height: 78px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.section-boxes .box .box-text{
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.05rem;
    margin-top: 10px;
}

.section-three-container{
    background-color: #ffffff;
    padding-block: 95px;
}
.section-three-container h2{
    font-family: "Zen Maru Gothic", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 40px;
    color: #11152F;
    line-height: 1;
    letter-spacing: 0.05rem;
    display: table;
    margin: 0 auto;
}

/****************************************/

.dropdown {
    width: 640px;
    margin: 28px auto 42px;
    display: table;
}
.dropdown .select-box-title{
    font-weight: 500;
    font-size: 18px;
    line-height: 1;
    letter-spacing: 0;
    color: rgba(51, 51, 51, 0.5);
    height: 56px;
    background-color: #ffffff;
    border-radius: 9px;
    border: 1.13px #EAEAEB solid;
    display: flex;
    align-items: center;
    padding-inline: 21px;
    position: relative;
    overflow: hidden;
}
.dropdown .select-box-title:hover{
    cursor: pointer;
}
.dropdown .select-box-title::after {
    content: '';
    background-color: #C0AE72;
    background-image: url(../images/down-arrow.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 22px;
    position: absolute;
    right: 0;
    top: 0;
    width: 73px;
    height: 100%;       
}
.dropdown .select-box-list{
    display: none;
    background-color: #ffffff;
    border-radius: 9px;
    border: 1.13px #EAEAEB solid;
    margin-top: 8px;
    overflow: hidden;
}
.dropdown .select-box-list.open{
    display: block;
}
.dropdown .select-box-list li{
    height: 56px;    
}
.dropdown .select-box-list li a {
    text-decoration: none;
    font-weight: 500;
    font-size: 18px;
    line-height: 1;
    letter-spacing: 0;
    color: #333333;
    width: 100%;
    height: 100%;
    padding-inline: 21px;
    display: flex;
    align-items: center;
    border-bottom: 1.13px #EAEAEB solid;
}
.dropdown .select-box-list li:last-child a{
    border-bottom: 0px #EAEAEB solid;
}
.dropdown .select-box-list li a:hover{
    background-color: rgba(204, 204, 204, 0.1);
}
.showroom-list-block{
    padding-inline: 80px;
    padding-block: 35px;
}
.showroom-list-block h3{
    font-family: "Zen Maru Gothic", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 32px;
    line-height: 1;
    letter-spacing: 0.05rem;
    display: table;
    margin: 0 auto 45px;
    color: #11152F;
}
.showroom-list-block .showroom-box-container{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;    
}
.showroom-list-block .showroom-box{
    background-color: #F8F4EC;
    border-radius: 8px;
    padding: 24px;
}
.showroom-list-block .showroom-box .showroom-img-box{
    aspect-ratio: 410 / 209;
}
.showroom-list-block .showroom-box .showroom-img-box img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.showroom-list-block .showroom-box{
    line-height: 1.5;
    letter-spacing: 0.05rem;
}
.showroom-list-block .showroom-box h4{
    font-family: "source-han-sans-japanese", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: 0;
    color: #3B4043;
    padding-block: 15px;
}
.showroom-list-block .showroom-box .btn {
    margin: 40px auto 0;
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, #0177C1, #0097F7, #0099F9);
    text-decoration: none;
    color: #fff;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: 0.05rem;
    cursor: pointer;
    transition: all .5s ease-in;
    width: 100%;
    max-width: 320px;
    height: 38px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.showroom-list-block .showroom-box .btn:after {
    content: '';
    background-image: url(../images/arrow-right.svg);
    width: 28px;
    height: 18px;
    position: absolute;
    right: 26px;
    top: 50%;
    transform: translateY(-50%);
    background-repeat: no-repeat;
    background-size: contain;
}

.showroom-list-block .showroom-box .btn:hover {
    background: linear-gradient(
      -135deg,
      #0177C1,
      #0097F7,
      #0099F9
    );
    transition: all .5s ease-out;
}
.showroom-list-block .showroom-box .btn span.union {
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.05rem;
    position: absolute;
    left: 26px;
    bottom: 12px;
    width: 47px;
    height: 46px;
}
.showroom-list-block .showroom-box .btn span.union img{
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
}
.showroom-list-block .showroom-box .btn span.union .union-text {
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
}

/****************************************/

.section-four-container{
    background-color: #F8F4EC;
    padding-block: 80px 76px;
}
.section-four-container .img-box-container{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.footer-bottom{ font-family: HiraKakuProN-W3; font-size:12px; line-height: 22px;}
.footer-bottom-container .footer-logo{max-width:152px; margin-bottom:20px}

@media (min-width: 768px) {
    .footer-bottom-container {
        padding: 50px;
        display: flex;
        flex-wrap: wrap;
    }
    .footer-bottom-container .col:first-child {
        width: 70%;
        padding-right: 20px;
    }
    .footer-bottom-container .col:last-child {
        width: 30%;
        text-align: right;
    }
}
@media (max-width: 767px) {
    .footer-bottom-container {
        padding: 30px 20px;
    }
}

/************************************************************************************/