@charset "UTF-8";
/* CSS Document */

/**********************************************************スムーズスクロール*********************************/

html {
  scroll-behavior: smooth;
}

/*************************************************テキストカラー・リンクテキストカラー************************/

body{
	color:#333333;/*通常のテキストカラー*/
	}
a{
	color:#222222;/*通常のリンクテキストカラー*/
	text-decoration:none;/*マウスが乗った時下線を表示（つけない場合は underline を none へ）*/
	}

a:hover{
	color:#83B7E6;/*マウスが乗った時の通常のリンクテキストカラー*/
	text-decoration:none;/*マウスが乗った時下線を表示（つけない場合は underline を none へ）*/	
	}

/*************************************************フォントサイズ調整******************************************/

body {
	font-family:"Hiragino Kaku Gothic Pro W3", "ヒラギノ角ゴ Pro W3", Osaka, "MS P Gothic", "ＭＳ Ｐゴシック", sans-serif;/*フォント種*/
	font-size:1rem;/*フォントサイズfirefox用*/
	text-align:center;
	background-color: #FFFFFF;
	width: 100%;
	margin:0;
	}

*{ margin:0; padding:0;}

img{ border:0;}

.wrapper{
	overflow-x: hidden;
	}

table,div{
	margin:auto;
	}

/*********************************************タイポグラフィ調整：文字間**************************************/


/* 見出し：文字間は詰めない（明示的に0em） */
h1, h2, h3, h4, h5, h6 {
  letter-spacing: 0em;
}

/* 本文：わずかに広げて読みやすく */
p {
  letter-spacing: 0.03em;
}

/*************************************************共通セレクタ*************************************************/

.C{
	text-align:center;
	}
.L{
	text-align:left;
	}
.R{
	text-align:right;
	}

.fontcolor_white{
	color: #FFFFFF;
	}

.fontcolor_black{
	color: #000000;
	}

.rounded_corners{
	border-radius: 10px;
	}

/**************************************************画像サイズ**************************************************/

img{
	max-width: 100%;
	height: auto;
	width /***/:auto;　
	}

	#container{
	width:100%;
	vertical-align: text-bottom;
	}

/**************************************************スライダー**************************************************/

.img_bxslider {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.img_bxslider {
  width: 1920px;
  aspect-ratio: 16 / 7;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
  display: block;
  object-fit: cover;
}

/* タブレット（1023px以下）は中央寄せをやめてwidth: 100%に */
@media screen and (max-width: 1023px) {
  .img_bxslider {
    width: 100%;
    left: auto;
    transform: none;
    aspect-ratio: 3 / 2; /* 例えば1080×720相当の比率 */
  }
}

/* スマホ（767px以下）はさらに縦長に */
@media screen and (max-width: 767px) {
  .img_bxslider {
    aspect-ratio: 6 / 7; /* 例：768×896 など縦のある表示へ */
  }
}

/******************************************about-section__イメージ*********************************************/


/* 共通：比率を保つためのコンテナ */
.about-section__image-picture {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2; /* デフォルトは3:2（768×512）に設定 */
  overflow: hidden;
}

.about-section__image-picture picture,
.about-section__image-picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* タブレット表示用：1436×338 = 約4.25:1の比率 */
@media screen and (min-width: 768px) and (max-width: 1367px) {
  .about-section__image-picture {
    aspect-ratio: 4.25 / 1;
  }
}

/* PC表示用：768×512 = 約3:2の比率に戻す */
@media screen and (min-width: 1368px) {
  .about-section__image-picture {
    aspect-ratio: 3 / 2;
  }
}

/*********************************************trust-sectionバナー**********************************************/

/* ===== PC・タブレット表示（768px以上） ===== */
@media screen and (min-width: 768px) {
  .trust-section__banner-layout {
    display: flex;
    max-width: 1436px;
    background: rgba(255, 255, 255, 0.0);
    text-align: left;
    overflow-x: hidden;
    overflow-y: visible; /* ← 余白カットの防止用 */
    gap: 2%; /* 1%ずつの余白を確保 */
  }

.trust-banner-wrapper {
    position: relative;
    padding-top: 10px; /* ← 浮き上がり対策のマージン */
    }

  .trust-section__image--type1,
  .trust-section__image--type2 {
    width: 48%;
    aspect-ratio: 4 / 3; /* 横:縦の比率を指定 */
    text-align: left;
    padding-bottom: 30px; /* ← marginの代わりに確実に高さを取れる */
  }

  .trust-banner__img {
    width: 100%; /* 画像自体も100% */
    height: auto;
    border: 5px solid #FFFFFF;
    border-radius: 10px;
    box-sizing: border-box; /* ← これが超重要！ */
  }
}

/* ===== スマートフォン表示（767px以下） ===== */
@media screen and (max-width: 767px) {
  .trust-section__banner-layout {
    display: block; /* 横並びflexを解除して縦並びに */
    max-width: 100%;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0);
    text-align: left;
    overflow-x: hidden;
    overflow-y: auto;
  }

.trust-banner-wrapper {
    position: relative;
    padding-top: 10px; /* ← 浮き上がり対策のマージン */
    }

  .trust-section__image--type1,
  .trust-section__image--type2 {
    width: 100%; /* 縦並びなので100%幅 */
    aspect-ratio: 4 / 3; /* 横:縦の比率を指定 */
    text-align: left;
    padding-bottom: 30px; /* ← marginの代わりに確実に高さを取れる */
  }

  .trust-banner__img {
    width: 100%; /* 画像自体も100% */
    height: auto;
    border: 5px solid #FFFFFF;
    border-radius: 10px;
    display: block; /* ブロック要素化して下余白問題回避 */
    box-sizing: border-box; /* ← これが超重要！ */
  }
}

/***************************************************画像角丸***************************************************/

.img_rounded_corners{
	border-radius: 10px;        /* CSS3草案 */  
	-webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
	-moz-border-radius: 10px;   /* Firefox用 */
	}

/**********************************************ハンバーガーメニュー**********************************************/

body.fixed {
	width: 100%;
	height: 100%;
	position: fixed;
	}

.overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 999;
	display: none;
	}

/*****************************************************アニメーション**********************************************/

/* ズームイン効果 */
.btn-shine.zoom-effect a {
  transition: transform 0.3s ease;
  display: inline-block;
}

.btn-shine.zoom-effect a:hover {
  transform: scale(1.05);
}

/*** ボタンを光らせる ***/
.btn-shine a{
	position: relative; /*疑似要素の起点*/
	overflow: hidden; /*範囲外の光を隠す*/
	}

/*** ボタンをキラッとさせる ***/
.btn-shine a:hover:after{
	content: "";
	position: absolute;
	top: -50%;
	left: -50%;
	width: 10%;
	height: 150%;
	background: #fff; /*光の色*/
	transform: rotate(45deg); /*45度傾ける*/
	animation: reflect 1s ease-in-out infinite;
	/*animation: アニメ名｜光る周期｜動き方｜ループ*/
	}

/*** 光のアニメーション ***/
@keyframes reflect{
  0%{
    transform: rotate(45deg) scale(0);
    opacity: 1;
  }
  100%{
    transform: rotate(45deg) scale(100);
    opacity: 0;
  }
}

/*** 拡大アニメーション ***/
.banner-zoom-hover {
  display: block;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.banner-zoom-hover:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.shine-wrap {
  width: 100%;
  text-align: center;
}

.img-wrapper {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.img-wrapper::after {
  content: "";
  position: absolute;
  top: -100%;
  left: -100%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
  135deg,
  rgba(255, 255, 255, 0) 45%,
  rgba(255, 255, 255, 0.7) 49%,
  rgba(255, 255, 255, 1.0) 50%,
  rgba(255, 255, 255, 0.7) 51%,
  rgba(255, 255, 255, 0) 55%
);
  animation: shine-light 2.0s ease-in-out infinite;
  pointer-events: none;
}

@keyframes shine-light {
  0% {
    transform: translateX(-100%) translateY(0);
  }
  100% {
    transform: translateX(100%) translateY(0);
  }
}

/*** 浮き上がり＋影 ***/
.banner-float-hover {
  display: block;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.banner-float-hover:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}

.fadein_top {
	opacity: 0;
	transform : translate(0, -50px);
	transition : all 1500ms;
	}

.fadein_top.scrollin{
	opacity: 1;
	transform: translate(0, 0);
	}

.fadein_bottom {
	opacity: 0;
	transform : translate(0, 50px);
	transition : all 1500ms;
	}

.fadein_bottom.scrollin{
	opacity: 1;
	transform: translate(0, 0);
	}

.slidein_right {
	opacity: 0;
	transform : translate(300px, 0);
	transition : all 2000ms;
	}

.slidein_right.scrollin{
	opacity: 1;
	transform: translate(0, 0);
	}

.slidein_left {
	opacity: 0;
	transform : translate(-300px, 0);
	transition : all 2000ms;
	}

.slidein_left.scrollin{
	opacity: 1;
	transform: translate(0, 0);
	}

.zoomin {
  opacity: 0;
  font-size: 0px;
  line-height:1.5;
  letter-spacing: 0.03em;
  transition: all 1600ms;
}

.zoomin.scrollin {
  opacity: 1;
  font-size: 3.0rem;
  transform: translate(0, 0);
}

/* スマートフォン用に調整（767px以下） */
@media screen and (max-width: 767px) {
  .zoomin.scrollin {
    font-size: 2.6rem; /* 必要なら1.8remなどさらに小さく調整可能 */
  }
}


/*googlemap***********************************************/

.map {
	position: relative;
	padding-bottom: 56.25%;
	margin-top: 35px;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
	}

.map iframe,
.map object,
.map embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 90%;
	height: 90%;
        padding-left:5%;
        padding-right:5%;
	}