@charset "UTF-8";

body {
  font-family: "Noto Sans JP", sans-serif;
  color: #333;
  letter-spacing: 0.05em;
  padding-top: 60px; /* 固定ヘッダー分の余白確保 */
	line-height:1.5;
}

.bg-earth {
  background: url('../img/bg.jpg') top center;
}

/*横からスッと出てくる**************************************/
/* h2, h3 それぞれの文字サイズ指定 */
.mainVisual__Title h2 {
  font-size: 2rem;
  font-weight: bold;
  margin: 0;
}
.mainVisual__Title h3 {
  font-size: 1.5rem; /* h3 の希望サイズ */
  font-weight: bold;
  margin: 0;
}

/* ▼ アニメーション共通設定（h2とh3のどちらにも効くように指定） */
.mainVisual__Title h2 span,
.mainVisual__Title h3 span {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}

.mainVisual__Title h2 span::before,
.mainVisual__Title h3 span::before {
  content: attr(data-text);
  display: inline-block;
  font-size: inherit;   /* 親要素(h2やh3)の文字サイズを継承 */
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  transform: translateY(100%);
}

/* スクロールして .is-animated が付いたら動く */
.mainVisual__Title h2.is-animated span::before,
.mainVisual__Title h3.is-animated span::before {
  animation: maskSlide 0.5s cubic-bezier(.16, 1, .3, 1) forwards;
  animation-delay: inherit; /* 必ず animation の後に記述 */
}

@keyframes maskSlide {
  to {
    transform: translateY(0);
  }
}
/****************************************************/

.h2 {
  font-size: 2rem;
  font-weight: bold;
}

h2 ,h3 ,h4 ,h5 ,.h2 ,.h3 ,.h4 ,.h5 {
line-height:1.7!important;
}

.bg-primary {
  background-color: #00b1eb!important;
}

.text-primary {
  color: #272bb5 !important;
}

.bg-light { 
  background-color: #f2edeb !important;
}

.bg-primary-light { 
  background-color: #7fd8f5;
}
.border-success {
	border-color:  #078366 !important;
}

/*ボトムが開いた本*/
.shapedividers_book-mb{
overflow:hidden;
position:relative;
}
.shapedividers_book-mb::before{
content:'';
font-family:'shape divider from ShapeDividers.com';
position: absolute;
bottom: -1px;
left: -1px;
right: -1px;
top: -1px;
z-index: 3;
pointer-events: none;
background-repeat: no-repeat; 
background-size: 115% 37px;
background-position: 50% 100%;    
background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 1 10 1" preserveAspectRatio="none"><path d="M0 2q5-2 5 0 0-2 5 0z" fill="%23ffffff"/></svg>'); 
}

@media (min-width:768px){
.shapedividers_book-mb::before{
background-size: 122% 62px;
background-position: 50% 100%;   
}  
}
 
@media (min-width:1025px){
.shapedividers_book-mb::before{ 
bottom: -0.1vw;
left: -0.1vw;
right: -0.1vw;
top: -0.1vw; 
background-size: 100% 63px;
background-position: 50% 100%;  
}
}
@media (min-width:2100px){
.shapedividers_book-mb::before{
background-size: 100% calc(2vw + 63px);
}
}

/*下のsectionがbg-lightの時*/
.shapedividers_book-mb-light{
overflow:hidden;
position:relative;
}
.shapedividers_book-mb-light::before{
content:'';
font-family:'shape divider from ShapeDividers.com';
position: absolute;
bottom: -1px;
left: -1px;
right: -1px;
top: -1px;
z-index: 3;
pointer-events: none;
background-repeat: no-repeat; 
background-size: 115% 37px;
background-position: 50% 100%;    
background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 1 10 1" preserveAspectRatio="none"><path d="M0 2q5-2 5 0 0-2 5 0z" fill="%23f2edeb"/></svg>'); 
}

@media (min-width:768px){
.shapedividers_book-mb-light::before{
background-size: 122% 62px;
background-position: 50% 100%;   
}  
}
 
@media (min-width:1025px){
.shapedividers_book-mb-light::before{ 
bottom: -0.1vw;
left: -0.1vw;
right: -0.1vw;
top: -0.1vw; 
background-size: 100% 63px;
background-position: 50% 100%;  
}
}
@media (min-width:2100px){
.shapedividers_book-mb-light::before{
background-size: 100% calc(2vw + 63px);
}
}
 
/*下のsectionがbg-primary-lightの時*/
.shapedividers_book-mb-primary{
overflow:hidden;
position:relative;
}
.shapedividers_book-mb-primary::before{
content:'';
font-family:'shape divider from ShapeDividers.com';
position: absolute;
bottom: -1px;
left: -1px;
right: -1px;
top: -1px;
z-index: 3;
pointer-events: none;
background-repeat: no-repeat; 
background-size: 115% 37px;
background-position: 50% 100%;    
background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 1 10 1" preserveAspectRatio="none"><path d="M0 2q5-2 5 0 0-2 5 0z" fill="%237fd8f5"/></svg>'); 
}

@media (min-width:768px){
.shapedividers_book-mb-primary::before{
background-size: 122% 62px;
background-position: 50% 100%;   
}  
}
 
@media (min-width:1025px){
.shapedividers_book-mb-primary::before{ 
bottom: -0.1vw;
left: -0.1vw;
right: -0.1vw;
top: -0.1vw; 
background-size: 100% 63px;
background-position: 50% 100%;  
}
}
@media (min-width:2100px){
.shapedividers_book-mb-primary::before{
background-size: 100% calc(2vw + 63px);
}
}
 
/* 1. ナビゲーションバー */
header {
  background: #00b1eb url('../img/hero-bg.jpg') no-repeat center center;
}

.navbar {
  background-color: rgba(0, 177, 235, 0.8) !important;
  /*border-bottom: 1px solid #eef2f0;*/
  min-height: 60px;
}

.navbar-brand {
  font-weight: bold;
  font-size: 1.4rem;
  color: #fff;
}

.logo-img {
  max-height: 40px;
  width: auto;
}

.nav-link {
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff !important;
  padding-left: 0.8rem !important;
  padding-right: 0.8rem !important;
  transition: color 0.2s ease;
}

.nav-link:hover,
.nav-link:focus {
  color: #1d2088 !important;
}

.offcanvas-end {
  width: 60% !important;
}

/* PC時（992px以上）のオフキャンバス解除と横並び制御 */
@media (min-width: 992px) {
  .navbar-expand-lg .offcanvas {
    position: static;
    z-index: auto;
    flex-grow: 1;
    width: auto !important;
    height: auto !important;
    visibility: visible !important;
    background-color: transparent !important;
    border: 0 !important;
    transform: none !important;
    transition: none !important;
  }
  
  .navbar-expand-lg .offcanvas .offcanvas-header {
    display: none;
  }
  
  .navbar-expand-lg .offcanvas .offcanvas-body {
    display: flex;
    padding: 0;
    overflow: visible;
  }
}

/* 2. ファーストビュー（Hero Section） */
.hero-section {
  position: relative;
  background: #f8fcf9 url('../img/hero-bg.jpg') no-repeat center center;
  background-size: cover;
  min-height: calc(100vh - 60px);
  display: flex;
  align-items: center;
  overflow: hidden;
}


/* 下層ページ用ジャンボトロン */
.jumbotron {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 25vh;
}

.jumbotron-article {
  background-image: url('../img/title-article.jpg');
}

/* お問い合わせフォーム */
label.col-form-label {
  text-align: right;
}

/* ==========================================
   2. ファーストビュー（ヒーローセクション）新デザイン対応
   ========================================== */
.hero-section {
  background: #fdfefe url('../img/hero-bg.jpg') no-repeat center center;
  background-size: cover;
  min-height: calc(100vh - 60px);
  display: flex;
  align-items: center;
}


/* =============================================
   6. フッター
============================================= */

footer ul {
    padding-left: 1rem;
}

footer ul li {
    list-style-type: none;
    padding-top: 0.5rem;
    padding-left: 0;
}

footer a {
    color: #000;
    text-decoration: none;
}

.foot-nav {
    font-size: 14px;
}


@media (max-width:1199px){
    .hero-section {
		background: url("../img/hero-bg-tab.png") no-repeat center center;
		background-size: cover;
		background-postion: center;
  }
}

/* 中デバイス（タブレット, 992px 未満）
==============================================*/
@media screen and (max-width: 991.98px) {
	

/* モバイル向けレスポンシブ（575.98px以下） */
@media screen and (max-width: 575.98px) {
.h2 {
  font-size: 2rem;
  font-weight: bold;
}

    .nav-link {
      color: #2064e3 !important;
    }

	.hero-section {
	/*background: url("../img/hero-bg-sp.png") no-repeat right bottom;*/
    /*background-size:auto;*/
		background: url("../img/hero-bg-sp.png") no-repeat;
		background-size: cover;
		background-postion: center;
    max-height: calc(100vh - 60px);
  }
	.jumbotron {
    background-position: left;

  }
	
	.jumbotron h2 {
    -webkit-text-stroke: 5px #ffffff;
    text-stroke: 5px #ffffff;
    /* フチが文字の内側に食い込むのを防ぐ */
    paint-order: stroke fill;
  }
}