@charset "UTF-8";

/*
 * File Name: style.css
 * Description: uchiumi css
 * Last Update: 2026/02/07
 */


@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap');

/* モダンリセット */
*, *::before, *::after {
box-sizing: border-box; /* サイズ計算を楽にする（超重要） */
}

body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {
margin: 0; /* ブラウザ独自の余白を消す */
}

img {
max-width: 100%;
display: block; /* 画像の下の隙間を消す */
}

ul, ol {
list-style: none; /* リストの「・」を消す（必要に応じて） */
padding: 0;
margin: 0;
}

a {
text-decoration: none; /* 下線を消す */
color: inherit; /* 文字色を親要素に合わせる */
}

[id] {
scroll-margin-top: 130px;
}


.mt-120{
margin-top:120px;
}

.mt-110{
margin-top:110px;
}

.mt-100{
margin-top:100px;
}

.mt-90{
margin-top:90px;
}

.mt-80{
margin-top:80px;
}

.mt-70{
margin-top:70px;
}

.mt-60{
margin-top:60px;
}

.mt-50{
margin-top:50px;
}

.mt-40{
margin-top:40px;
}

/* 共通 */

body{
font-size:16px;
font-family: "a-otf-gothic-mb101-pr6n", sans-serif;
font-optical-sizing: auto;
font-style: normal;
font-weight:400;
line-height: 1.75;
color:#000;
}

.ja{
font-family: "Noto Serif JP", serif;
}

.hirakaku{
font-family: "hiragino-kaku-gothic-pron", sans-serif;
}

section{
padding:80px 0;
position: relative;
}

section#sec01{
padding:0;
margin-top:145px;
}

.sp-only{
	display:none;
}

/* swiper */

.mySwiper {
position: relative;
padding-bottom: 60px; /* 下に余白を作る */
}

.mySwiper .swiper-pagination {
bottom: 0px !important; /* 下に固定 */
}

/* ドットの基本スタイル */
.mySwiper .swiper-pagination-bullet {
width: 14px; 
height: 14px;
background: #ccc;
opacity: 1;
margin: 0 6px !important;
}

/* アクティブ時のドット */
.mySwiper .swiper-pagination-bullet-active {
background: #1F3D74;
}


.mySwiper .swiper-wrapper a{
display:block;
}

.mySwiper .swiper-wrapper a h2{
font-size:1.2rem;
margin:10px 0;
}

.mySwiper .swiper-wrapper a img{
border-radius:10px;
}

/* color */

.bg-gray{
	background:#E0E1E1;
}

.bg-black{
	background:#000;
}

/* svg text */

img.svg-text{
	width:350px!important;
}

/* ================================
 menu
 ================================ */

.site-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
}
/* 全体 */
.nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 18px 40px;
background:#000;
width:100%;
}

/* PC メニュー横並び */
.menu {
display: flex;
gap: 40px;
list-style: none;
margin-right:45px;
}

.nav-contact{
display: flex;
gap: 15px;
list-style: none;
}

.menu-wrapper{
display: flex;
gap: 20px;
align-items: center;
}

/* ホバー時の演出（少し明るくする） */
.btn-contact:hover {
opacity: 0.85;
}

.menu li a {
text-decoration: none;
color: #FFF;
font-weight:400;
font-size:1rem;
}

/* ハンバーガー初期状態（2本線） */
.hamburger {
width: 50px;
height: 15px;
display: none; /* PCでは非表示 */
flex-direction: column;
justify-content: space-between;
cursor: pointer;
}

.hamburger span {
display: block;
height: 2px;
background: #FFF;
border-radius: 3px;
transition: 0.4s;
}

/* タブレット以下でハンバーガー表示 */
@media (max-width: 1199.98px) {
 /* 黒のオーバーレイ */
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0,0,0,0.9);
opacity: 0;
visibility: hidden;
transition: opacity 0.4s ease;
z-index: 9;
}

.overlay.active {
opacity: 0.8;
visibility: visible;
}

/* ハンバーガー表示 */
.hamburger {
display: flex;
z-index: 10; /* オーバーレイより上 */
}

/* メニュー本体 */
.menu {
position: fixed;
top: 80px;
left: 20px;
flex-direction: column;
gap: 20px;
padding: 25px;
opacity: 0;
transform: translateY(-10px);
visibility: hidden;
transition: opacity 0.4s ease, transform 0.4s ease;
z-index: 10;
}

/* 表示時 */
.menu.active {
opacity: 1;
transform: translateY(0);
visibility: visible;
}

/* リンク文字を白に */
.menu li a {
color: #fff;
text-decoration: none;
font-size: 18px;
}

}

/* ✕ アニメーション */
.hamburger.active span:nth-child(1) {
transform: translateY(6px) rotate(45deg);
background:#FFF;
}

.hamburger.active span:nth-child(2) {
transform: translateY(-8px) rotate(-45deg);
background:#FFF;
}


/* btn */

.btn-box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
}

.btn1 {
display: block;
width: 200px;
height: 78px;
line-height: 78px;
font-size: 24px;
text-decoration: none;
background-color: #f15a4a;
color: #fff;
text-align: center;
cursor: pointer;
-webkit-transition: 0.5s all;
transition: 0.5s all;
}

.btn1:hover {
background-color: #fff;
border: 2px solid #f15a4a;
color: #f15a4a;
}

.btn2{
transition: color 0.3s ease;
}

.btn2:hover {
color: #E6001A;
}

.btn3{
transition: color 0.3s ease;
}

.btn3:hover {
color: #E6001A;
}

.sp-book-btn{
display:none;
}

/* ================================
 header
 ================================ */

.logo a{
font-size:1.2rem;
font-weight:600;
color:#203F77;
}

.logo a img{
	width:115px;
}

.nav-contact .btn3,.nav-contact .btn4{
font-size:0.9rem;
padding:10px 40px;
}

.nav-contact .btn4{
padding:12px 40px;
}

/* ================================
 fv
 ================================ */

.fv img{
	width:100%;
}

#sec01 h1{
color:#FFF;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
line-height:1.5;
}

#sec01 h1 span{
font-size:1rem;
display:block;
margin-top:20px;
}

/* ================================
 sec02
 ================================ */

#sec02 img{
width:18px;
display:inline-block;
	vertical-align: -1px;
    margin-right: 5px;
}

#sec02 h3{
	font-size:1.2rem;
	font-weight:400;
}

#sec02 .text-image{
	width:110px;
	margin-right: 25px;
}

.read-more-btn {
  display: inline-flex;
  align-items: center; /* 画像と線の高さを中央で揃える */
  text-decoration: none;
  color: #333; /* 矢印の色 */
  transition: opacity 0.3s;
	margin-left:-200px;
}

/* 「READ MORE」画像の部分 */
.read-more-btn .text-image {
  height: 18px; /* 画像の高さを文字サイズのように指定（重要） */
  width: auto;  /* 横幅は自動で調整 */
  margin-right: 20px; /* 画像と線の間の余白 */
  vertical-align: middle; /* 微調整 */
}

/* 矢印の線部分 */
.read-more-btn .line-arrow {
  position: relative;
  width: 100px; /* 線の長さ（自由に変更可能） */
  height: 1px; /* 線の太さ */
  background-color: currentColor; /* .read-more-btnのcolorを継承 */
  transition: width 0.3s ease; /* ホバー時のアニメーション */
}

/* 矢印の先端部分 */
.read-more-btn .line-arrow::after {
  content: '';
  position: absolute;
  right: 0;
  top: -1px; /* 先端の位置調整 */
  width: 10px; /* 先端の大きさ */
  height: 10px;
  border-top: 1px solid currentColor; /* 先端の太さ */
  transform: rotate(45deg); /* 斜め45度に回転 */
  transform-origin: right top;
}

/* ホバー時の演出（Snow Monkeyなどで使いやすい設定） */
.read-more-btn:hover {
  opacity: 0.7;
}

.read-more-btn:hover .line-arrow {
  width: 120px; /* ホバーで線が少し伸びる */
}

/* ================================
 sec03
 ================================ */

#sec03 h3{
	font-weight:400;
	font-size:2.4rem;
	margin-bottom:8px;
}

#sec03 p{
	font-size:1.4rem;
}

ul.numbered-list {
    list-style: none; /* デフォルトの黒丸を消す */
    counter-reset: item; /* カウンターをリセット */
    padding-left: 20px;
  }
  ul.numbered-list li {
    counter-increment: item; /* 数値を1ずつ増やす */
    display: flex;
    margin-bottom: 8px;
  }
  ul.numbered-list li::before {
    content: counter(item) ". "; /* 数字とドットを表示 */
    margin-right: 8px;
    font-weight: bold;
  }


/* ================================
 sec04
 ================================ */

#sec04{
	color:#FFF;
}

#sec04 p{
	font-size:1.4rem;
	padding:0 80px;
}

#sec04 img.svg-text{
	margin:0 auto;
}

/* ================================
 footer
 ================================ */

footer{
padding:80px 0 40px;
position: relative;
background:#E0E1E1;
}

footer .logo img{
width:120px;
}

footer p{
font-size:0.8rem;
}

footer ul {
list-style: none;
padding-left: 0;
text-align:right;
}

footer ul li{
display:inline;
padding:0 15px;
font-size:0.8rem;
}


footer .copyright p{
text-align:center;
font-size:0.8rem;
}

/* ================================
 - Responsive design
 ================================ */
 
@media (max-width: 1599px) {

}
 
/* 〜1399px（xl 未満） */
@media (max-width: 1399.98px) {

}

/* 〜1199px（lg 未満） */
@media (max-width: 1199.98px) {
	.hamburger{
		margin: 0 auto;
        margin-right: 0;		
	}
}

/* 〜991px（md 未満） */
@media (max-width: 991.98px) {
	.border-end{
		border-right:none!important;
	}
}

/* 〜767px（sm 未満） */
@media (max-width: 767.98px) {
	.pc-only{
		display:none;
	}
	.sp-only{
		display:block;
	}
[id] {
scroll-margin-top: 80px;
}
.hamburger{
right:12%;
}
	section#sec01{
		margin-top:97px;
	}
	.logo a img{
		width:65px;
	}
	ul.numbered-list{
		padding-left:0;
	}
}

/* 〜575px（xs） */
@media (max-width: 575.98px) {
	section,footer{
		padding-left:20px;
		padding-right:20px;
	}
	section#sec01{
		margin-top:80px;
	}
.nav{
padding:10px 25px;
}
	ul.numbered-list li,p{
		font-size:3vw;
	}
	#sec02 h3{
		font-size:3.2vw;
	}
	#sec02 p a,#sec02 time{
		font-size:2.8vw;
	}
	#sec02 img{
		width:14px;
	}
	img.svg-text{
		width:280px!important;
	}
#sec04 h3  {
font-size: 5.3vw;
}
	#sec03 h3{
	font-size: 4.8vw;	
	}
#sec04 p{
font-size:4vw;
}
	#sec03 p{
		font-size: 3.6vw;
	}
	#sec04 .gx-5{
		--bs-gutter-x: 0rem!important;
	}
	#sec04 p {
		padding:0;
	}
	.read-more-btn{
		margin-left:0;
	}
	footer ul{
		text-align:center;
	}
	footer .copyright p{
		font-size:0.7rem;
	}
	footer .logo img {
		width:80px;
	}
}