@charset "utf-8";
 
/* ----------------------------------------------------
  円を描くボタン
---------------------------------------------------- */
.maru_button_02 {
  font-size: 18px !important;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
  color: #b71414 !important; /* 文字の色 */  
}
.maru_icon_02 {
  width: 45px;
  height: 45px;
  position: relative;
  flex-shrink: 0;
}
.maru_icon_02 svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.maru_icon_02 circle.bg {
  stroke: #b71414; /* 初期　丸の色 */
  stroke-width: 2;
  fill: none;
}
.maru_icon_02 circle.fg {
  stroke: #222; /* ホバー　丸の色 */
  stroke-width: 2;
  fill: none;
  stroke-dasharray: 125.66;
  stroke-dashoffset: 125.66;
  transition: stroke-dashoffset 0.6s ease;
}
.maru_button_02:hover .maru_icon_02 circle.fg {
  stroke-dashoffset: 0;
}
.maru_icon_02 .arrow {
  position: absolute;
  top: 48%;
  left: 51%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  pointer-events: none;
  color: #b71414; /* 初期　矢印の色 */  
}
.maru_button_02:hover .maru_icon_02 .arrow {
  color: #222; /* ホバー　矢印の色 */
}

/* ----------------------------------------------------
  バナー共通スタイル
---------------------------------------------------- */
.banner_item {
  position: relative;
  overflow: hidden;
  display: block;
  z-index: 1;
}

.banner_item::after {
  position: absolute;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-repeat: no-repeat;
  background-position: 50% 0%;
  background-size: cover;
  transition: transform .3s ease-out;
  z-index: 1;
}

.banner_item::before {
  position: absolute;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.2); /* 暗さ調整 */
  z-index: 2;
  pointer-events: none;
}

.banner_item .inner {
  position: relative;
  z-index: 3;
}

.banner_item:hover::after {
  transform: scale(1.2);
}

/* banner_item
-------------------------- */
.banner_item a {
  display: block;
  padding: 50px;
  text-align: center;
  color: #fff;
  text-decoration: none;
  position: relative;
  z-index: 3;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

@media print, screen and (min-width: 768px) {
  .banner_item a {
    padding: 80px 20px 100px 20px;
  }
}
@media print, screen and (min-width: 992px) {
  .banner_item a {
    padding: 100px 30px 120px 30px;
  }
}
@media print, screen and (min-width: 1200px) {
  .banner_item a {
    padding: 120px 40px 140px 40px;
  }
}
@media print, screen and (min-width: 1400px) {
  .banner_item a {
    padding: 150px 40px 170px 40px;
  }
}

/* 文字
-------------------------- */
.banner_item p {
  font-size: 60px;
  line-height: 80px;
}
.banner_item h3 {
  font-size: 20px;
  line-height: 30px;
  letter-spacing: 2px;
}
.banner_item span {
  font-size: 11px;
}

@media print, screen and (min-width: 768px) {
  .banner_item p {
    font-size: 70px;
    line-height: 90px;
  }  
  .banner_item h3 {
    font-size: 25px;
    line-height: 35px;
  }
  .banner_item span {
    font-size: 12px;
  }
}

@media print, screen and (min-width: 992px) {
  .banner_item p {
    font-size: 75px;
    line-height: 95px;
  }    
  .banner_item h3 {
    font-size: 30px;
    line-height:40px;
  }
  .banner_item span {
    font-size: 13px;
  }
}

@media print, screen and (min-width: 1200px) {
  .banner_item p {
    font-size: 80px;
    line-height: 100px;
  }   
  .banner_item h3 {
    font-size: 35px;
    line-height:45px;
  }
  .banner_item span {
    font-size: 14px;
  }
}

/* 個別の画像切り替え
-------------------------- */
.banner_1::after {
  background-image: url("../images/main01.jpg");
}

.banner_2::after {
  background-image: url("../images/main02.jpg");
}

.banner_3::after {
  background-image: url("../images/main03.jpg");
}

/* ----------------------------------------------------
  リンクボタン（全体構造）
---------------------------------------------------- */
/* 背景画像を暗くするオーバーレイ */
.link-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.65); /* 暗め */
  transition: background-color 300ms ease;
  z-index: 1;
}

/* ホバー時の暗さ設定 */
.link-card:hover::before {
  background-color: rgba(0, 0, 0, 0.45); /* 暗め */
}

.link-card {
  display: block;
  position: relative;
  text-decoration: none;
  transition: background-color 300ms ease;
  overflow: hidden;
  padding: 20px;
  background-image: url("../images/main01.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

@media print, screen and (min-width: 768px) {
  .link-card {
    padding: 60px 50px;
  }
}

@media print, screen and (min-width: 1400px) {
  .link-card {
    padding: 120px 100px;
  }
}

/* テキスト　タイトル
-------------------------- */
.link-card__text{margin-top: 20px;}

@media only screen and (max-width: 767px) {
.link-card__text h2 {
  font-size: 11px !important;
  }
.link-card__text p {
  font-size: 30px !important;
  }  
}

/* テキスト＋矢印エリア
-------------------------- */
.link-card__body {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  box-sizing: border-box;
}

/* 見出し＋テキスト
-------------------------- */
.link-card__text {
  flex: 1 1 auto;
  min-width: 0;
  color: #fff;
}

a:link .link-card__text,
a:visited .link-card__text {
  text-decoration: none;
  color: #fff;
}

a:hover .link-card__text,
a:active .link-card__text {
  text-decoration: none;
  color: #fff;
}

/* 矢印画像エリア
-------------------------- */
.link-card__arrow {
  flex: 0 0 auto;
  margin-left: 15px;
}

@media print, screen and (min-width: 768px) {
  .link-card__arrow {
    margin-left: 20px;
  }
}

@media print, screen and (min-width: 1200px) {
  .link-card__arrow {
    margin-left: 50px;
  }
}

/* 矢印画像 */
.link-card__arrow img {
  width: 40px;
  height: auto;
  display: block;
  transition: transform 0.3s ease-in-out;
}

@media print, screen and (min-width: 768px) {
  .link-card__arrow img {
    width: 60px;
  }
}

@media print, screen and (min-width: 992px) {
  .link-card__arrow img {
    width: 60px;
  }
}

@media print, screen and (min-width: 1200px) {
  .link-card__arrow img {
    width: auto;
    max-width: 100%;
  }
}

/* ホバー時に矢印画像が右に移動 */
.link-card:hover .link-card__arrow img {
  transform: translateX(15px);
}

@media print, screen and (min-width: 768px) {
.link-card:hover .link-card__arrow img {
  transform: translateX(25px);
  }
}

/* ----------------------------------------------------
   h1
---------------------------------------------------- */
/* ----------------------------------------------------
  ぼかしから出現
---------------------------------------------------- */
.blur{
	animation-name:blurAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
}

@keyframes blurAnime{
  from {
	filter: blur(10px);
	transform: scale(1.02);
  }

  to {
	filter: blur(0);
	transform: scale(1);
  }
}

/* 左寄せ　背景画像あり　文字アニメーション
---------------------------------------------------- */
.h2_02{background: url("../images/h2_02.jpg") no-repeat scroll 50% 20% / cover;}
.h2_03{background: url("../images/h2_03.jpg") no-repeat scroll 50% 100% / cover;}
.h2_04{background: url("../images/h2_04.jpg") no-repeat scroll 50% 0% / cover;}

.h2_midasi_01_bgimg {
  position: relative;
  color: white;
  z-index: 0;
  overflow: hidden;
}
.h2_midasi_01_bgimg::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* ここで暗さを調整 */
  z-index: -1; /* 背景の後ろに来ないように注意 */
}
.h2_midasi_01{
	padding:50px 0;
	text-align: center;
	color: #fff;
}
@media print, screen and (min-width: 768px) {.h2_midasi_01{padding:90px 0;}}
@media print, screen and (min-width: 992px) {.h2_midasi_01{padding:100px 0;}}
@media print, screen and (min-width:1200px) {.h2_midasi_01{padding:120px 0;}}
@media print, screen and (min-width:1400px) {.h2_midasi_01{padding:140px 0;}}

.h2_midasi_01 p{
	font-size: 40px;
	line-height:50px;
	letter-spacing:2px;
	}
.h2_midasi_01 h1{
	font-size: 18px;
	letter-spacing:2px;
}
@media print, screen and (min-width: 768px) {
.h2_midasi_01 p{
	font-size: 55px;
	line-height:65px;
	letter-spacing:7px;  
	}
.h2_midasi_01 h1{
	font-size: 22px;
	letter-spacing:5px;
	}
}
@media print, screen and (min-width: 992px) {
.h2_midasi_01 p{
	font-size: 65px;
	line-height:75px;
	}
.h2_midasi_01 h1{
	font-size: 25px;
	}
}
@media print, screen and (min-width: 1200px) {
.h2_midasi_01 p{
	font-size: 75px;
	line-height:90px;
	}
}
@media print, screen and (min-width: 1400px) {
.h2_midasi_01 p{
	font-size: 90px;
	line-height:100px;
	}
}