@charset "utf-8";
body{
    animation-name:fadeInAnime;
    animation-duration:2s;
    animation-fill-mode:forwards;
    opacity:0;
    line-height: 1.8;
	overflow-x: auto;
	text-align:justify;
	-webkit-overflow-scrolling: touch;
	color: var(--base);
	font-family: 'Noto Sans JP', "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", 'ヒラギノ角ゴシック', 'Hiragino Sans', 'メイリオ', Meiryo, sans-serif;
    }
    @keyframes fadeInAnime{
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }
html {
	font-size: 62.5%;
	font-weight: 300;
	font-style: normal;
	scroll-behavior: smooth;
	letter-spacing: 1px;
  }
a {
    transition: 0.5s;
}
a:hover {
    opacity: 0.5;
}

:root{
	--fs16: clamp(1.6rem, 1vw, 1.4rem);
	--fs18: 1.8rem;
	--fb_02: 500;
	--base: #43403F;
	--b_color: #2C86FF; /* ブルー */
	--b02_color: #1C96D5; /* ブルー02 */
	--b03_color: #BEF4FB; /* ブルー03　背景色*/
	--y_color: #FFFF00; /* イエロー */
	--p_color: #f4b0b3; /* ピンク */
}
.b_color{color:var(--b_color)}
.fb{
	font-weight: bold;
}
.fb_02{
	font-weight: 500;
}
.fb_03{
	font-weight: 400;
}
.fs20_18{
	font-size: 2rem;
}
@media screen and (max-width: 767px) {
.fs20_18{
	font-size: 1.8rem;
}
}
.bk_b{
	background-color: var(--b03_color);
}
.img100{
	width: 100%;
}
main {
	position: relative;
	_overflow: hidden;
	display: block;
	font-size: 1.6rem;
}
.ps_r{
	position: relative
}

/* レイアウト関連
 ====================================================*/
.contents_wrap{
	width: min(90%, 1200px);
	margin-inline: auto;
}
.contents_wrap_02{
	width: min(90%, 800px);
	margin-inline: auto;
}
.contents_wrap_03{
	width: min(90%, 1000px);
	margin-inline: auto;
}
/* マージン */
.mt01em{margin-top: 1em}
.mt02em{margin-top: 2em !important}
.mt10px{margin-top: 10px !important}
.mt30px{margin-top: 30px !important}

.mb01em{margin-bottom: 1em}
.mb10px{margin-bottom: 10px}

.mt_pcsp_01{margin-top: 100px}
.mt_pcsp_02{margin-top: 200px}
.ml_pcsp_1em{margin-left: 0em}
.ml_pcsp_2em{margin-left: 0em}
@media screen and (max-width: 767px) {
.mt_pcsp_01{margin-top: 50px}
.ml_pcsp_1em{margin-left: 1em}
.ml_pcsp_2em{margin-left: 1em}
}

.t_center{text-align: center}
.center{
	display: table;
	margin-inline: auto;
}

/* pc sp */
	.t-c_t-l{text-align: center}
	.t-l_t-c{text-align: left}
	.t-r_t-c{text-align: right}
    .pc {display: block !important;}
    .sp {display: none !important;}
    /* インライン要素の時 */
    .pcinline {display: inline;}
    .spinline {display: none !important;}

@media screen and (max-width: 767px) {
	.t-c_t-l{text-align: left}
	.t-l_t-c{text-align: center}
	.t-r_t-c{text-align: center}
    .pc {display: none !important;}
    .sp {display: block !important;}
    /* インライン要素の時 */
    .pcinline {display: none !important;}
    .spinline {display: inline !important;}
}


/* ボタン */
/* 矢印付きボタン
 ====================================================*/
/*== ボタン共通設定 */
.btn{
    /*アニメーションの起点とするためrelativeを指定*/
	overflow: hidden;
	display: inline-block;
	width: 100%;
    /*ボタンの形状*/
	text-decoration: none;
    padding: 8px 40px 8px 20px;
    text-align: center;
    outline: none;
    /*アニメーションの指定*/   
    transition: ease .2s;
	background-color: #fff;
	border: 1px solid var(--b02_color);
	font-weight: 400;
}
.btn_02 {
  	width: 340px;
  	background-color: var(--y_color);
  	padding: 15px 60px 15px 40px;
  	font-size: 1.8rem;
  	border-radius: 30px !important;
	letter-spacing: 2px;
}
.btn_link{
	margin-top: 100px;
}
/*ボタン内spanの形状*/
a.btn:hover{
	opacity: 1;
}
.btn{
	position: relative;
	border-radius: 20px;
}
.btn span {
	position: relative;
	z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
	color: var(--b02_color);
}

.btn:hover span{
	color:#fff;
}
.btn span::after {
  content: '';
  width: 10px;
  height: 10px;
  border-top: 1px solid var(--b_color);
  border-right: 1px solid var(--b02_color);
  transform: rotate(45deg) translateY(-50%);
  position: absolute;
  top: 50%;
  right: -30px;
  transition: 0.3s ease-in-out;
}
.btn:hover span::after {
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
}

/*== 背景が流れる（左から右） */
.bgleft:before {
 	content: '';
    /*絶対配置で位置を指定*/
 	position: absolute;
 	top: 0;
 	left: 0;
 	z-index: 2;
    /*色や形状*/
 	background-color: var(--b02_color);/*背景色*/
 	width: 100%;
	height: 100%;
    /*アニメーション*/
 	transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
 	transform: scale(0, 1);
	transform-origin: right top;
}

/*hoverした際の形状*/
.bgleft:hover:before{
	transform-origin:left top;
	transform:scale(1, 1);
}

.kome{
	margin-left: 1em;
	text-indent: -1em;
}
.kome::before{
	content: '※';
	color: red;
}
.red{color: red}
.list_01{
	list-style: disc;
	margin-left: 10px;
}
.list_01 li{
	padding-left: 5px;
}
.list_01 li::marker{
	content: '●';
  	color: #848484;
  	font-size: 0.8rem;
}
/* header
 ====================================================*/
#header{
	position: sticky;
	top: 0;
  	z-index: 2;
	display: flex;
	justify-content: space-between;
	height: 80px;
	padding-inline: 2%;
}
#header img{
	width: 100%;
}
#header .logo{
	z-index: 1;
	margin-top: 5px;
	width: 250px;
}
#header a:hover{
	opacity: 1;
}
/* ヘッダーナビ */
#header .header_nav_01{
	position: absolute;
  	right: 150px;
	margin-top: 20px;
	display: flex;
	gap: 30px;
	font-size: 1.6rem;
}
#header .header_nav_01 a{
	transition: 0.2s;
}
#header .header_nav_01 a:hover{
	border-bottom: 3px dotted var(--b_color);
	padding-bottom: 2px;
}
#header .header_nav_contact{
	position: absolute;
	top: 0;
	right: 0;
	width: 80px;
}

#header .header_nav_01 li.current {
  border-bottom: 3px dotted var(--b_color);
}

#header.scroll-nav{/* スクロールで変化 */
	height: 80px;
  	background-color: rgba(255,255,255,0.8);
}

/* ぱんくず
 ====================================================*/
.pankuzu_wrap{
	margin-top: 30px;
}
.pankuzu_wrap img{
	height: auto;
	width: 100%;
}
.pankuzu_wrap .breadcrumbsWrap{
	position: absolute;
	top: 20%;
	left: 5%;
}

/* 固定ページ
 ====================================================*/
.page_ttl_wrap{
	text-align: center;
	color: var(--b02_color);
	line-height: 1.3;
}
.page_ttl_wrap .ttl_sub {
  font-size: clamp(3.5rem, -0.909rem + 4.55vw, 5rem);
  text-align: center;
  margin-bottom: 0px;
  margin-top: 30px;
}
.page_ttl_wrap .ttl {
	font-size: 2rem;
}
.page_ttl{
	margin-block: 90px 40px;
	text-align: center;
	font-size: clamp(3rem, -0.909rem + 4.55vw, 4rem);
	line-height: 1.4;
}
.page_ttl span{
	color: var(--b02_color)
}

/* footer
 ====================================================*/
.footer_image_wrap{
	display: flex;
	gap: 10px;
	margin-block: 100px 60px;
}
.footer_image_wrap li{
  width: calc(100% / 5 - 10px);
}
.footer_image_wrap li img{
  width: 100%;
}
#footer{
	position: relative;
	display: flex;
  	align-items: center;
  	padding: 10px 3%;
  	font-size: clamp(1.1rem, 0.918rem + 0.91vw, 1.6rem);
}
#footer .logo{
  	margin-right: 20px;
  	padding-right: 20px;
	width: 300px;
}
.copy{
	padding: 10px 5%;
	background-color: var(--b02_color);
	color: #fff;
	font-size: clamp(1.1rem, 0.991rem + 0.55vw, 1.4rem);
	letter-spacing: 2px;
}
#footer .footer_nav {
  display: flex;
  font-size: 1.6rem;
  gap: 10px 50px;
  width: 319px;
  flex-wrap: wrap;
	  margin-left: auto;
}
#footer address{
	font-size: 1.4rem;
}
ul.footer_nav ul {
    position: relative;
    padding: 1rem 1rem 1rem 2rem;
}
ul.footer_nav ul li {
    padding: 0.5rem 0;
    line-height: 1.5;
}

ul.footer_nav ul li::before {
    position: absolute;
    left: 1rem;
    _padding-left: 0.2rem;
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    content: '\f105';
}

@media screen and (max-width: 767px) {
.footer_image_wrap {
  flex-wrap: wrap;
  justify-content: space-evenly;
}
.footer_image_wrap li{
  width: calc(100% / 3 - 10px);
}
}

/* フッターの前で止まるページトップ
 ====================================================*/
/*リンクを右下に固定*/
#page-top {
	position: fixed;
	right: 20px;
	bottom: 30px;
	z-index: 2;
    /*はじめは非表示*/
	opacity: 0;
	transform: translateY(100px);
}

/*　上に上がる動き　*/
#page-top.UpMove{
	animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }
  to {
    opacity: 1;
	transform: translateY(0);
  }
}

/*　下に下がる動き　*/

#page-top.DownMove{
	animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
  	opacity: 1;
	transform: translateY(0);
  }
  to {
  	opacity: 1;
	transform: translateY(100px);
  }
}

/* SP
 ====================================================*/
@media (max-width: 768px) {
.mv_area {
  margin-top: -80px;
}	
main {
	margin-top: 120px;
  	font-size: 1.4rem;
}
.btn span::after {
  right: -30px;
}
.btn_02 {
  width: 240px;
  font-size: 1.6rem;
}
	
/* SP header
 =====================*/
#header{
	height: 30px;
}
#header .logo {
	width: 180px;
	margin-inline: 0;
	position: absolute;
    left: 10px;
}
#header .header_nav_contact {
	right: 50px;
  	width: 50px;
}
.pankuzu_wrap .breadcrumbsWrap {
  top: 0;
}
/* SP footer
 =====================*/
#footer{
	flex-direction: column
}
#footer .logo {
  border-right: none;
  margin-right: 0px;
  padding-right: 0px;
	margin-bottom: 30px;
}
}/* //@media */


/* ハンバーガーメニュー */
/* =============== MENUがCLOSEに =============== */
.openbtn{
	/*ボタン内側の基点となるためrelativeを指定。
追従するナビゲーションの場合はfixed＋top、rightといった位置をセットで指定*/
	position: relative;
	background: var(--base);
	cursor: pointer;
    width: 50px;
    height: 50px;
	position: fixed;
	z-index: 9999;
	top: 0rem;
	right: 0rem;
}

/*ボタン内側*/
.openbtn span{
    display: inline-block;
    transition: all .4s;/*アニメーションの設定*/
    position: absolute;
    left: 13px;
    height: 2px;
    border-radius: 5px;
	background: #fff;
  	width: 50%;
  }
.openbtn span:nth-of-type(1) {
	top: 15px;	
}
.openbtn span:nth-of-type(2) {
	top: 23px;
}
.openbtn span:nth-of-type(3) {
	top: 32px;
}

/*.openbtn span:nth-of-type(3)::after {
	content: "Menu";
	position: absolute;
	top: 4px;
	left: 0px;
	color: #fff;
	font-size: 10px;
	text-transform: uppercase;
}*/

/*activeクラスが付与されると線が回転して×になり、Menu⇒Closeに変更*/

.openbtn.active span:nth-of-type(1) {
    top: 18px;
    left: 12px;
    transform: translateY(6px) rotate(-45deg);
    width: 50%;
}

.openbtn.active span:nth-of-type(2) {
	opacity: 0;
}

.openbtn.active span:nth-of-type(3){
    top: 30px;
    left: 12px;
    transform: translateY(-6px) rotate(45deg);
    width: 50%;
}

/*.openbtn.active span:nth-of-type(3)::after {
	content:"Close";*//*3つ目の要素のafterにClose表示を指定
    /*transform: translateY(0) rotate(-45deg);
	top:5px;
	left:12px;
}*/
/* =============== MENUがCLOSEに =============== */

#g-nav{
    /*position:fixed;にし、z-indexの数値を小さくして最背面へ*/
    position:fixed;
	z-index: -1;
	opacity: 0;/*はじめは透過0*/
    /*ナビの位置と形状*/
	top:0;
	left: 0;
	width:100%;
    height: 100vh;/*ナビの高さ*/
	background-color: var(--b03_color);
    /*動き*/
	transition: all 0.3s;
}

/*アクティブクラスがついたら透過なしにして最前面へ*/
#g-nav.panelactive{
  opacity: 1;
  z-index:999;
}

/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list{
    /*ナビの数が増えた場合縦スクロール*/
    position: relative;
    z-index: 999;
    width: 100%;
    height: 100vh;/*表示する高さ*/
    overflow: auto;
    -webkit-overflow-scrolling: touch;
	font-size: 1.4rem;
}

/*ナビゲーション*/
#g-nav-list{
	position: absolute;
	top: 10%;
  	left: 50%;
	transform: translateX(-50%);
  	-webkit-transform: translateX(-50%);
  	-ms-transform: translateX(-50%);
}
#g-nav ul {
  display: none;
  _position: absolute;
  z-index: 999;
  _top: 100px;
  _left: 10%;
}

#g-nav.panelactive ul {
    _display: block;
	_widht: 100%;
}
#g-nav .sp_nav_list{
	width: 90%;
	display: flex !important;
	flex-wrap: wrap;
	margin-inline: auto;
	_position: absolute;
	_top: 10%;
  	_left: 50%;
  	_transform: translateX(-50%);
  	_-webkit-transform: translateX(-50%);
  	_-ms-transform: translateX(-50%);
	font-weight: 500;
}
#g-nav .sp_nav_list_02 {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 20px;
  flex-flow: column;
  align-items: center;
}
#g-nav .sp_nav_list li img{
	width: 50px;
}
#g-nav .sp_nav_list_02{
  	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	margin-top: 20px;
	padding-inline: 20%;
	text-align: center;
	font-size: 1.8rem;
}
#g-nav .sp_nav_list_02 li{
	width: 100%;
	border-bottom: 1px solid var(--b_color);
}
#g-nav .sp_nav_list_02 li a{
	display: block;
}
#g-nav .logo {
  width: 40%;
  margin: 80px auto;
}

/*リストのレイアウト設定*/
#g-nav li a{
  color: var(--base);
  text-decoration: none;
  padding: 5px;
  display: inline-block;
  /*letter-spacing: 0.1em;*/
}
#g-nav .nav_list_line{
border-top: 2px dotted #fff;
    padding-top: 4px;
    margin-top: 7px;
}
.g-nav-sns{
	display: flex;
	justify-content: center;
}
.nav-btn{
	position: fixed;
	z-index: 9999;
	top: 0.1rem;
	right: 0.2rem;
	cursor: pointer;
	width: 0.3rem;
	height: 50px;
	border-radius: 5px;
}
.nav-btn span{
    display: inline-block;
	transition: all .4s;
	position: absolute;
	height: 0.02rem;
	background: #000;
	width: 100%;
  }
.nav-btn span:nth-of-type(1) {
	top:15px;	
}
.nav-btn span:nth-of-type(2) {
	top: 0.3rem;
}
.nav-btn span:nth-of-type(3) {
	top: 0.45rem;
}
.nav-btn.active span:nth-of-type(1) {
    top: 0.23rem;
	left: 0px;
	transform: translateY(6px) rotate(-45deg);
	width: 100%;
}
.nav-btn.active span:nth-of-type(2) {
	opacity: 0;
}
.nav-btn.active span:nth-of-type(3){
	top: 0.35rem;
	left: 0px;
	transform: translateY(-6px) rotate(45deg);
	width: 100%;
}

}/* //sp media */


/* ふわっと　アニメーション
 ====================================================*/

/* 場所はそのままでフェードイン */
.fade_in {
	opacity: 0;
    transform: translate(0,0);
    transition: all 1.5s;
}
.fade_in.scrollin {
	opacity: 1;
}

/* 時間差フェード */
.fade {
	opacity: 0;
	transform: translate(0, 20px);
	transition: all 0.5s ease;
	transition-delay: 0.2s;
}

.fade02 {
	opacity: 0;
	transform: translate(0, 20px);
	transition: all 0.5s ease;
	transition-delay: 0.6s;
}

.fade03 {
	opacity: 0;
	transform: translate(0, 20px);
	transition: all 0.5s ease;
	transition-delay: 1.0s;
}

.fade04 {
	opacity: 0;
	transform: translate(0, 20px);
	transition: all 0.5s ease;
	transition-delay: 1.4s;
}

.fade05 {
	opacity: 0;
	transform: translate(0, 20px);
	transition: all 0.5s ease;
	transition-delay: 1.8s;
}

.fade06 {
	opacity: 0;
	transform: translate(0, 20px);
	transition: all 0.5s ease;
	transition-delay: 2.2s;
}

@media screen and (max-width: 640px) {
	.fade,
	.fade02,
	.fade03,
	.fade04,
	.fade05,
	.fade06 {
		transition: all 0.5s ease;
		transition-delay: 0.2s;
	}
}

.fade.scrollin,
.fade02.scrollin,
.fade03.scrollin,
.fade04.scrollin,
.fade05.scrollin,
.fade06.scrollin {
	opacity: 1;
	transform: translate(0, 0);
}

/* 右から出現 */
.fade_right {
	opacity: 0;
	transform: translate(20px, 0);
	transition: all 1.4s ease;
	transition-delay: 0.2s;
}

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

/* 左から出現 */
.fade_left {
	opacity: 0;
	transform: translate(-20px, 0);
	transition: all 1.4s ease;
	transition-delay: 0.2s;
}

.fade_left.scrollin {
	opacity: 1;
	transform: translate(0, 0);
}
.fadein-bottom{
      transform: translate(0,30px);
  }





/* ふわっと　アニメーション　その場で
 ====================================================*/
.fadeIn_01{
animation-name:fadeInAnime_01;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime_01{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn_02{
animation-name:fadeInAnime_02;
animation-duration:4s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime_02{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}



/* 下から */

.fadeUp{
animation-name:fadeUpAnime;
animation-duration: 1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }

  to {
    opacity: 1;
	transform: translateY(0);
  }
}

/* 上から */

.fadeDown{
animation-name:fadeDownAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeDownAnime{
  from {
    opacity: 0;
	transform: translateY(-100px);
  }

  to {
    opacity: 1;
	transform: translateY(0);
  }
}

/* 左から */

.fadeLeft{
animation-name:fadeLeftAnime;
animation-duration:3s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeLeftAnime{
  from {
    opacity: 0;
	transform: translateX(-100px);
  }

  to {
    opacity: 1;
	transform: translateX(0);
  }
}

/* 右から */

.fadeRight{
animation-name:fadeRightAnime;
animation-duration:4s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeRightAnime{
  from {
    opacity: 0;
	transform: translateX(20px);
  }

  to {
    opacity: 1;
	transform: translateX(0);
  }
}


/* VIDEO RESPONSIVE add shukuin 2025.05.07
 ====================================================*/
@media (max-width: 768px) {
	video {
		width: 100%;
	}
}