@charset "UTF-8";
/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/


body, html {
	font-family: Meiryo, serif;
	position: relative;
	overflow-x: hidden;
	box-sizing: border-box
}
html {
	scroll-behavior: smooth
}
body {
	line-height: 1.6;
	color: var(--text-color)
}

[class^=icon-] {
	display: inline-block;
	margin-right: 5px;
	vertical-align: middle
}

:root {
  --primary-color: #00b783;
  --secondary-color: #00856f;
  --text-color: #2c5036;
  --light-bg: #f8faf8;
  --accent-color: #f52a0f;
}

.center {
  text-align: center !important;
}

.left {
  text-align: left !important;
}

.right {
  text-align: right !important;
}

h1, h2, h3 {
  font-family: "Meiryo", serif;
  font-weight: normal;
}

/* Loading背景画面設定　*/
#splash {
  /*fixedで全面に固定*/
  opacity: 1;
  position: fixed;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  background: #FFF;
  text-align: center;
  color: #fff;
  left: 0;
  top: 0;
  transition: all 0.8s ease;
}

/* Loading画像中央配置　*/
#splash_logo {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 400px;
  height: 320px;
  transition: all 0.8s ease;
}
.ani-fadeInUp {
	position: relative;
	transform: translate(0, 140px);
	transition: opacity 1s cubic-bezier(.155, .91, .695, .95), transform 1s cubic-bezier(.155, .91, .695, .95)
}
.ani-fadeInRight {
	position: relative;
	transform: translate(140px, 0);
	transition: opacity 1s cubic-bezier(.155, .91, .695, .95), transform 1s cubic-bezier(.155, .91, .695, .95)
}
.ani-fadeInLeft {
	position: relative;
	transform: translate(-140px, 0);
	transition: opacity 1s cubic-bezier(.155, .91, .695, .95), transform 1s cubic-bezier(.155, .91, .695, .95)
}
.min {
	font-family:  Meiryo, serif
}
h1, h2, h3, h4, h5, h6 {
	font-family: Meiryo, serif;
	font-weight: 200!important
}
#content {
	position: relative
}
.center {
	text-align: center!important
}
.right {
	text-align: right!important
}
.left {
	text-align: left!important
}
.tsw {
	text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff
}
.p_5 {
	padding: 5px!important
}
.p_10 {
	padding: 10px!important
}
.p_20 {
	padding: 20px!important
}
.p_30 {
	padding: 30px!important
}
.p_40 {
	padding: 40px!important
}
.p_50 {
	padding: 50px!important
}
.w_10 {
	width: 10%!important
}
.w_20 {
	width: 20%!important
}
.w_30 {
	width: 30%!important
}
.w_40 {
	width: 40%!important
}
.w_50 {
	width: 50%!important
}
.w_60 {
	width: 60%!important
}
.w_70 {
	width: 70%!important
}
.w_80 {
	width: 80%!important
}
.w_90 {
	width: 90%!important
}
.w_100 {
	width: 100%!important
}
.delay-200 {
	transition-delay: .2s!important
}
.delay-400 {
	transition-delay: .4s!important
}
.delay-600 {
	transition-delay: .6s!important
}
.delay-800 {
	transition-delay: .8s!important
}
.h3_st_01 span {
	display: block;
	font-size: .6em
}
img.border-round {
	border-radius: 9px
}
span.sp_01 {
	font-size: .9em;
	color: #666
}
span.sp_02 {
	color: #ff0
}
span.line_01 {
	background: rgba(239, 246, 109, .7);
	font-size: 1.2em
}
.line_top01 {
	display: block;
	width: 100%;
	height: 164px;
	background: url(images/line_top01.webp);
	background-position: center center
}


.three_colmn>div {
	width: calc(100% / 3)
}
.two_colmn>div {
	width: calc(100% / 2)
}
.as16_9 {
	aspect-ratio: 16/9;
	object-fit: cover
}
.as3_2 {
	aspect-ratio: 3/2;
	object-fit: cover
}

.flexbox {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap
}

::-webkit-scrollbar {
	width: 5px
}
::-webkit-scrollbar-track {
	background-color: #cae7e1
}
::-webkit-scrollbar-thumb {
	background-color: #64b066
}
a {
	color: #011c3d
}
a:hover {
	color: #64b066
}
ul {
	margin: 0 0 1em 0;
	font-size: .9em
}
#header {
	/* border-top: 4px solid #64b066; */
	position: relative;
	z-index: 105;
}
.header-in {
	position: sticky;
	top: 0
}
.navi {
	background: 0 0
}
.content-in {
	background: 0 0
}
.footer, .header-container, .main, .sidebar {
	background: 0 0
}
.header-in_area {
	width: 100%;
	text-align: left;
	margin: 0 auto;
	padding: 5px 20px
}
.top_logo img {
	width: 100px;
	height: 100px
}
.logo-image {
	padding: 0;
	font-size: inherit
}
.logo {
	text-align: left
}
.logo_area {
	width: 40%;
	text-align: left;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: end;
	padding-top: 1em
}
.site-name-text {
	position: relative;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: end;
	justify-content: center
}
.logo_area img {
	max-width: 220px;
	height: auto
}


@keyframes PageAnime-content {
	0% {
		opacity: 0
	}
	100% {
		opacity: 1
	}
}
@keyframes PageAnime-ttb {
	0% {
		transform-origin: top;
		transform: scaleY(0)
	}
	50% {
		transform-origin: top;
		transform: scaleY(1)
	}
	50.001% {
		transform-origin: bottom
	}
	100% {
		transform-origin: bottom;
		transform: scaleY(0)
	}
}


.title_area {
	width: 100%;
	position: relative
}
.title_area .balloon1 {
	position: absolute;
	top: -30px;
	left: 0;
	transition-delay: 1s;
	transition-duration: 1s;
	transform: rotate(-10deg)
}
#search_box {
	border: 1px solid #ccc;
	position: relative;
	padding: 10px;
	border-radius: 5px
}
#search_box input[type=text] {
	min-width: 500px;
	max-width: 100%
}
#search_box .flexbox {
	align-items: center
}
#search_box button[type=submit] {
	width: 160px;
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
	border-radius: 0 5px 5px 0;
	font-size: 1.1em;
	font-weight: 700
}


.news_area {
	max-width: 1280px;
	bottom: 20px;
	margin: auto;
	padding: 20px;
	text-align: center
}
.news_area .news_list {
	font-size: 1em;
	text-align: right;
	padding: 1em 0
}

.news_area .flexbox>div {
	width: 32%
}
.news_area .flexbox>div:nth-child(1) {
	margin-right: 2%
}
.news_area .flexbox>div:nth-child(3) {
	margin-left: 2%
}
.home #main {
	width: 100%;
	margin: 0;
	padding: 0
}
#main {
	order: 2
}
#sidebar {
	order: 1;
	position: sticky;
	top: 10px
}

.toparea1 {
	background: rgba(0, 63, 129, .05);
	margin: 0 0 3em 0;
	padding-bottom: 3em
}

.toparea3 {
	position: relative
}
.toparea3_box {
	max-width: 1280px;
	margin: 2em auto
}
.toparea3 div {
	text-align: center
}
.toparea3 .three_colmn>div:nth-child(1) {
	padding-right: 50px
}
.toparea3 .three_colmn>div:nth-child(2) {
	padding: 0 25px
}
.toparea3 .three_colmn>div:nth-child(3) {
	padding-left: 50px
}
.toparea3 .two_colmn>div {
	padding: 30px
}
.toparea3 div h3 {
	margin: 1em 0;
	color: #4d1d12
}
.toparea3 div h3.tt_st1 {
	margin: 3em 0;
	color: #40414a
}
.toparea3 div p {
	font-size: .9em;
	margin-bottom: 1em
}

table.menu th {
	background: #64b066;
	color: #fff;
	font-weight: 800
}
table.menu td {
	background: #fff
}
h4.menu {
	font-size: 1.5em
}
h5.menu {
	background: #64b066;
	color: #fff;
	padding: 8px;
	font-size: 1.1em
}
dl.menu {
	width: 100%;
	margin-bottom: 1.5em
}
dl.menu dt {
	width: 42%;
	border-bottom: 2px dotted #ccc;
	background: #fff;
	padding: 8px
}
dl.menu dd {
	width: 58%;
	border-bottom: 2px dotted #ccc;
	background: #fff;
	padding: 8px
}
img.round {
	border-radius: 50%
}
.linebg {
	width: 100%;
	height: 400px;
	background: url(images/lineimg_bg2.webp) no-repeat;
	background-size: cover;
	opacity: .5
}


h3.tt_st1 {
	background-position: contain;
	min-height: 90px;
	font-size: 2em;
	text-align: center;
	color: #666;
	letter-spacing: .2em;
	margin: 2em auto 1em auto;
	line-height: 1.5em;
	padding-top: .8em;
	text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff, 0 1px 0 #fff, 0-1px 0 #fff, -1px 0 0 #fff, 1px 0 0 #fff;
	display: inline-block;
	position: relative
}
h3.tt_st1::before {
	content: "";
	width: 200px;
	height: 200px;
	background: url(images/titlearea3_01.webp) no-repeat;
	background-position: cover;
	display: block;
	position: absolute;
	left: -220px;
	top: -78px
}
h3.tt_st1 span {
	font-size: .6em;
	letter-spacing: .05em
}

.ex_wrap {
	position: relative;
	margin-left: calc(50% - 50vw)!important;
	max-width: calc(100vw)!important;
	width: calc(100vw)!important
}

.ex_st02 {
	padding: 20px 20px 20px 20px
}
.ex_st03 {
	background: rgba(128, 149, 157, .1);
	padding: 20px 20px 20px 20px
}
.ex_st04 {
	background-image: linear-gradient(rgba(149, 94, 135, .5), rgba(68, 94, 138, .5)), url(images/face_01.webp);
	background-attachment: fixed, fixed;
	background-repeat: no-repeat, no-repeat;
	background-size: cover, cover;
	padding: 80px 0
}
#footer {
	margin-top: 0;
	position: relative
}
.ex_st04 .inq_area {
	background: rgba(255, 255, 255, .8);
	text-align: center;
	position: relative;
	padding: 60px 0;
	width: 100%;
	height: calc(100% - 100px);
	max-width: 960px;
	left: 0;
	right: 0;
	margin: auto
}
.inq_area h3 {
	font-size: 2.8rem;
	display: inline-block;
	position: relative
}
.inq_area h3:after, .inq_area h3:before {
	content: '';
	position: absolute;
	top: 50%;
	display: inline-block;
	width: 105px;
	height: 1px;
	background-color: #000
}
.inq_area h3:before {
	left: -120px
}
.inq_area h3:after {
	right: -120px
}
.inq_area p {
	font-weight: 400;
	width: 100%;
	position: relative
}
.inq_area p span {
	display: block;
	position: absolute;
	font-weight: 800;
	font-size: .9em;
	top: -1em;
	left: 0;
	right: 0;
	margin: auto
}
.inq_area .tel {
	width: 50%;
	font-size: 2.5em;
	color: #333;
	padding: 0 1em
}
.inq_area .tel span {
	display: block;
	border: 1px solid #333;
	padding: 10px;
	width: 80%;
	margin: -1em auto 0 auto;
	border-radius: 5px;
	font-size: 1rem
}
.inq_area .c_form {
	width: 50%;
	font-size: 1.5em;
	padding: 0 1em
}
.inq_area .c_form a.btn {
	width: 90%;
	font-size: 1.2rem;
	margin-top: 1.5em;
	padding: 1.2em
}
.inq_area .c_form a.btn i {
	margin-right: 1rem
}
.footer_menu {
	position: relative;
	z-index: 3
}
.footer_menu h3 img {
	width: 200px;
	height: auto
}
.footer_menu>div:nth-child(1) {
	width: 100%;
	padding: 60px 10px 0 10px
}
.footer_menu>div:nth-child(1) p {
	font-size: .9em
}
.footer_nav {
	width: 100%;
	padding: 60px 0 20px 0
}
.footer_menu_box {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto
}
.footer_menu_box>div {
	width: calc(100% / 3);
	padding: 0 20px
}
.fix_menu_navi ul.l {
	width: 100%
}
.fix_menu_navi ul, .footer_nav .footer_menu_box ul, .sidebar ul {
	margin-left: 0;
	padding-left: 0
}
.fix_menu_navi ul li ul, .footer_nav .footer_menu_box ul li ul, .sidebar ul li ul {
	padding-left: 20px
}
.fix_menu_navi ul li, .footer_nav .footer_menu_box ul li, .sidebar ul li {
	width: 100%;
	list-style: none;
	font-size: 1rem;
	font-weight: 700
}
.fix_menu_navi ul li ul li, .footer_nav .footer_menu_box ul li ul li, .sidebar ul li ul li {
	font-weight: 400
}
.fix_menu_navi ul li:hover, .footer_nav .footer_menu_box ul li:hover, .sidebar ul li:hover {
	color: #64b066
}
.fix_menu_navi ul li ul li:hover::before, .footer_nav .footer_menu_box ul li ul li:hover::before, .sidebar ul li ul li:hover::before {
	content: "-";
	color: #40414a
}
.fix_menu_navi ul li ul li::before, .footer_nav .footer_menu_box ul li ul li::before, .sidebar ul li ul li::before {
	content: "-"
}
.fix_menu_navi ul li ul li::before {
	color: #fff
}
.fix_menu_navi ul li a, .footer_nav .footer_menu_box li a, .sidebar ul li a {
	color: #40414a;
	border-bottom: 1px dotted #ccc
}
.fix_menu_navi ul li a:hover, .footer_nav .footer_menu_box li a:hover, .sidebar ul li a:hover {
	opacity: .8
}
.fix_menu_navi ul li a, .footer_nav li a, .sidebar ul li a {
	width: 90%;
	margin: 0 auto;
	display: inline-block;
	padding: 5px 0 5px 1em;
	font-size: .9em;
	text-decoration: none;
	text-align: left
}
.fix_menu_navi ul li a {
	color: #fff
}
.side_list li {
	display: block;
	position: relative;
	margin-bottom: .5rem
}
.sidebar ul.side_list li a {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%
}
.side_date {
	font-size: .8rem;
	font-weight: 400
}
.side_img {
	width: 80px
}
.side_img img {
	aspect-ratio: 1/1
}
.side_title {
	font-size: .9rem;
	font-weight: 400
}
.footer_menu .flexbox .footer_menu_02 {
	width: calc(100% - 200px);
	padding: 10px;
	font-size: .9em
}
.footer_parking span.parking {
	background: #00adec;
	color: #fff;
	padding: 10px 20px;
	border-radius: 5px;
	cursor: pointer;
	margin-right: 1.5em
}
.footer_parking i {
	margin-left: 1em
}
.footer_parking span i {
	margin-left: 0
}
.footer-bottom-content {
	float: right;
	text-align: center
}
.map_area {
	padding: 0;
	margin: 0
}
.map_area iframe {
	margin: 0
}
.ani-fadeInUp {
	position: relative;
	transform: translate(0, 140px);
	transition: opacity 1s cubic-bezier(.155, .91, .695, .95), transform 1s cubic-bezier(.155, .91, .695, .95)
}
.ani-fadeInRight {
	position: relative;
	transform: translate(140px, 0);
	transition: opacity 1s cubic-bezier(.155, .91, .695, .95), transform 1s cubic-bezier(.155, .91, .695, .95)
}
.ani-fadeInLeft {
	position: relative;
	transform: translate(-140px, 0);
	transition: opacity 1s cubic-bezier(.155, .91, .695, .95), transform 1s cubic-bezier(.155, .91, .695, .95)
}
.page .content-in,
.single .content-in,
.error404 .content-in {
	max-width: 1280px;
	padding: 5px 20px;
	margin: 0 auto
}
.error404 .content .main {
    margin: 0;
    width: 100%;
	order:1;
}
.error404 .content #sidebar {
    order:2;
    width: 100%;
}
.wrap {
	width: 100%;
	margin: 0 auto
}
.wrap2 {
	max-width: 980px;
	width: 100%;
	padding: 5px 20px;
	margin: 0 auto
}
.main {
	width: 69%;
	padding: 18px 12px;
	padding: 0 12px;
	border: none;
	position: relative;
	z-index: 0
}
.sidebar {
	width: 29%;
	border: 1px solid transparent;
	padding: 0
}

.sidebar h3 {
	background: #64b066;
	color: #fff
}
.sidebar h3 i {
	margin-right: .5em
}
.sidebar h4 {
	border-top: 2px solid #70ae9e;
	border-bottom: 2px solid #70ae9e;
	padding: .4em .2em .4em .8em;
	margin-bottom: .8em
}
.sidebar h4 a {
	color: #70ae9e;
	text-decoration: none;
	transition: all 0s ease-in-out
}
.sidebar h4 a::before {
	content: '\f054';
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	margin-left: 0;
	margin-right: .8em
}
.sidebar h4 a:hover::before {
	margin-left: .4em;
	margin-right: .4em
}


.widget-entry-cards figure {
	width: 90px
}
.new-entry-card-thumb img {
	aspect-ratio: 1/1
}
.new-entry-card-title {
	font-size: .9rem;
	padding-top: 1.5rem
}
#fix_navi {
	width: 100px;
	height: 100px;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 105
}
.fix_navi_logo {
	width: 100px;
	height: 250px;
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto
}
#fix_navi_menu {
	width: 360px;
	height: 100vh;
	position: fixed;
	top: 0;
	right: -360px;
	background: rgba(255, 255, 255, 1);
	background: rgba(97, 136, 52, .9);
	background: rgba(100, 176, 102, .9);
	transition: all .5s 0s ease;
	text-align: center;
	opacity: 0;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	z-index: 104
}
#fix_navi_menu img.site-logo-image{
	width: 240px;
	height: auto;
  }
  #fix_navi_menu .url_txt{
	margin:1em 0 3em 0;
  
  }
  #fix_navi_menu .url_txt a{
	text-decoration: none;
	font-weight: bold;
	letter-spacing: 0.2em;
	color:#FFF
  }
  
  #fix_navi_menu .flexbox{
	width: 100%;
  }
  #fix_navi_menu.active{
	  /* transition: opacity right 500ms 0s ease; */
	transition: all 500ms 0s ease;
	  opacity: 1;
	  
	  width: 360px;
	top:0;
	  right:0;
  }
  #fix_navi_menu .fix_menu_navi{
  	padding-top: 70px;
  }
  #fix_navi_menu.active .fix_menu_navi{
	width: 100%;
	height: 100vh;
	position: relative;
  }

  #fix_navi_menu.active{
    height: 100%;
    overflow-y: auto;
  }
  #fix_navi_menu.active .fix_menu_navi{
    height: 100%;
   
  }
  #fix_navi_menu.active .fix_menu_navi .flexbox div:nth-child(2).f_66 ul li{
    text-align: center;
    width: 46%;
    /* height: 80px; */
    /* overflow: hidden; */
  }

#fix_navi_menu h1 img {
	max-width: 200px;
	height: auto
}
.menu-btn {
	position: absolute;
	padding: 10px;
	width: 50px;
	height: 55px;
	font-size: 10px;
	text-align: center;
	cursor: pointer;
	z-index: 105;
	top: -20px;
	bottom: 0;
	left: 0;
	right: -20px;
	transition: all .3s 0s ease;
	margin: auto;
	background: #64b066;
	border-radius: 3px
}
.bar {
	position: absolute;
	top: 7px;
	left: 10px;
	display: block;
	width: 30px;
	height: 3px;
	background: #fff;
	-webkit-transition: all .5s;
	transition: all .5s;
	-webkit-transform-origin: left top;
	-ms-transform-origin: left top;
	transform-origin: left top
}
.bar.middle {
	top: 16px;
	opacity: 1
}
.bar.bottom {
	top: 25px;
	-webkit-transform-origin: left bottom;
	-ms-transform-origin: left bottom;
	transform-origin: left bottom
}
.menu-btn__text {
	position: absolute;
	bottom: 2px;
	left: 0;
	right: 0;
	margin: auto;
	color: #fff;
	-webkit-transition: all .5s;
	transition: all .5s;
	display: block;
	visibility: visible;
	opacity: 1
}


.active .bar.top {
	width: 38px;
	top: 8px;
	left: 12px;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

.active .bar.middle {
	opacity: 0;
}

.active .bar.bottom {
	width: 38px;
	top: 34px;
	left: 12px;
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}


article p {
	margin-left: 1rem
}
.entry-content .w900 {
	max-width: 900px!important;
	margin: 0 auto 1em auto
}
.faq-question {
	margin-bottom: 0;
	padding: 0 1em
}
.faq-answer {
	background: #efefef;
	padding: .3em 1em
}
.entry-content .wp-block-cocoon-blocks-faq {
	margin-bottom: .1em
}
.side-scroll-list-wrapper {
	position: relative;
	width: 100%;
	height: 700px
}
.side-scroll-list {
	position: absolute;
	top: 60px;
	left: 0;
	display: flex;
	gap: 0 60px
}
.side-scroll-item {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 300px
}
.side-scroll-item+.side-scroll-item {
	margin-left: 60px
}
.side-scroll-list li {
	list-style: none
}

@keyframes text_anime_on {
	0% {
		opacity: 0
	}
	100% {
		opacity: 1
	}
}
.s_cc p {
	opacity: 0
}
.is-visible .s_cc p {
	animation: text_anime_on 1s ease-out forwards;
	animation-delay: 1.8s
}

ul.about_rokusou_a {
	margin: 0 0 2em 0;
	padding: 0
}
ul.about_rokusou_a li {
	list-style: none;
	margin: 0 2%;
	width: 21%;
	text-align: center
}
.footer-bottom-logo .logo img {
 display: none;
}
.footer-bottom-content {
	float: none;
}
.source-org.copyright{
	text-align: center;
}





@media screen and (max-width:1280px) {
	.content {
		padding: 0 20px
	}
}
@media screen and (max-width:1023px) {
	
	body {
		overflow-x: hidden
	}
	#splash_logo img {
		width: 60%
	}
	.logo_area .site-name-text {
		height: auto
	}
	.three_colmn>div, .two_colmn>div {
		width: 100%!important
	}
	.wrap {
		padding: 5px;
		margin: 0 auto
	}
	.news_area {
		left: 0;
		right: 0;
		margin: auto;
		padding: 10px;
		width: 96%
	}

	.content {
		padding: 0
	}

	ul {
		font-size: .8em
	}
	.toparea3_01 {
		padding: 0 20px
	}

	
	h4.menu {
		font-size: 1.2em
	}
	h5.menu {
		padding: 5px;
		font-size: .9em
	}
	dl.menu dd, dl.menu dt {
		padding: 5px;
		font-size: .8em
	}
	.toparea3 div h3.tt_st1 {
		margin: 1em 0
	}


	.face_area {
		top: 0;
		margin: 0 auto 1em auto
	}
	.face_area_list ul li a img {
		width: 60px;
		height: auto
	}
	.header-in_area {
		max-height: 120px;
		text-align: center
	}
	.logo_area img {
		max-height: 110px;
		width: auto;
		margin-top: 8px
	}
	#header-container {
		position: relative;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 103
	}

	h3.tt_st1 {
		min-height: 55px;
		font-size: 1.5em;
		text-align: center;
		color: #666;
		letter-spacing: .2em;
		margin: 1em auto;
		background-size: 100% auto
	}


	.toparea3_box {
		max-width: 1280px;
		margin: 0 auto
	}
	h3.tt_st1::before {
		content: "";
		width: 100px;
		height: 100px;
		background: url(images/titlearea3_01.webp) no-repeat;
		background-size: cover;
		display: block;
		position: absolute;
		left: -100px;
		top: -28px
	}

	.footer_nav ul {
		margin: 0;
		padding: 0
	}
	.footer_nav li {
		width: 80%;
		margin: 0 auto;
		list-style: none;
		padding: .2em 0
	}
	.footer_menu_box>div {
		width: 100%;
		padding: 0 20px
	}
	.footer_menu>div:nth-child(1) {
		width: 100%;
		padding: 60px 10px;
		text-align: left;
		border-right: none;
		border-bottom: 1px dashed #555
	}
	.ex_wrap.ex_st03 {
		padding: 10px
	}
	.ex_wrap.ex_st03 .wrap {
		padding: 5px 0
	}
	ul.mobile-footer-menu-buttons {
		box-sizing: border-box
	}
	.footer_parking span {
		position: relative;
		display: block;
		margin-bottom: 1em
	}
	.footer_parking span.parking {
		margin-right: 0
	}
	.ani-fadeInLeft::before {
		height: 300px;
		top: 200px
	}
	.footer-bottom .logo {
		text-align: center
	}
	#footer {
		margin-top: 0;
		padding-bottom: 60px
	}
	.menu-content {
		max-width: 100%;
		z-index: 1000
	}
	ul.mobile-menu-buttons {
		box-sizing: border-box;
		z-index: 1001
	}

	.page .content-in {
		padding: 5px 0;
		margin: 0 auto
	}
	.article h1 {
		position: relative;
		padding: 10px 10px 10px 10px;
		margin-top: 0;
		font-size: 1.2em
	}
	.toparea3 .two_colmn>div {
		padding: 10px
	}
	.article h3 {
		font-size: 1.2em
	}
	.wrap2 {
		padding: 5px 5px
	}
	ul.about_rokusou_a li {
		list-style: none;
		margin: 0 2% 2% 2%;
		width: 46%;
		text-align: center
	}

	.side-scroll-list-wrapper {
		position: relative;
		width: 100%;
		height: 400px
	}
	.delay-200, .delay-400, .delay-600, .delay-800 {
		transition-delay: 0s!important
	}
}
@media screen and (max-width:834px) {
	.inst_post_area {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
	}
	.inst_post_area .inst_img, .inst_post_area .inst_mov {
		width: 150px;
		height: 150px;
		overflow: hidden;
		margin: 10px;
		position: relative;
	}
	.inst_post_area .inst_img img, .inst_post_area .inst_mov video {
		object-fit: cover;
		width: 150px;
		height: 150px;
	}
	#fix_navi {
		z-index: 1000
	}
	#main {
		width: 100%;
		margin: 0;
		padding: 0 1em
	}
	#main {
		order: 1
	}
	#sidebar {
		order: 2
	}
	.main {
		width: 100%;
		padding: 18px 12px;
		padding: 0 12px;
		border: none;
		position: relative;
		z-index: 0
	}
	.sidebar {
		width: 100%;
		border: 1px solid transparent;
		padding: 19px;
		padding: 0 19px
	}
	.footer_menu .flexbox .footer_menu_02 {
		width: 100%;
		padding: 10px;
		font-size: .9em
	}

	#search_box button[type=submit] {
		width: 160px;
		height: auto;
		position: relative;
		margin: 1em auto;
		top: inherit;
		right: inherit;
		border-radius: 5px;
		font-size: 1.1em;
		font-weight: 700
	}
	#search_box input[type=text] {
		min-width: 100%;
		max-width: 100%
	}
	.btn {
		margin-bottom: .5em
	}

	.article p {
		margin-left: 0
	}

	.fix_menu_navi {
		overflow-y: auto
	}
	.table-container {
		position: relative;
		overflow-x: auto;
		white-space: nowrap
	}
	.table {
		border-collapse: collapse
	}
	.table__header {
		color: #fff;
		font-weight: 700;
		background: #1492af
	}
	.revue_01, .revue_02 {
		margin: 0 1em 1em 1em
	}
	.ex_st04 .inq_area {
		background: rgba(255, 255, 255, .8);
		text-align: center;
		position: relative;
		padding: 60px 1em;
		width: 96%;
		height: calc(100% - 100px);
		max-width: 960px;
		left: 0;
		right: 0;
		margin: auto
	}
	.inq_area h3 {
		font-size: 1.8rem;
		display: inline-block;
		position: relative
	}
	.inq_area p {
		font-size: .9rem
	}
	@keyframes scroll-hint-animation {
		0% {
			transform: translate(-50%, -50%)
		}
		50% {
			transform: translate(-40%, -50%)
		}
		100% {
			transform: translate(-50%, -50%)
		}
	}
	.inq_area .tel {
		width: 100%;
		font-size: 1.4em;
		margin-bottom: 1em
	}
	.inq_area .c_form {
		width: 100%;
		font-size: .9em;
		padding: 0
	}
	.inq_area .tel span {
		margin: 0 auto 0 auto
	}
	.new-entry-card {
		padding: 0 10px
	}

}



.line_top01 {
	display: block;
	width: 100%;
	height: 162px;
	background: url(images/line_top01.webp);
	background-position: center center
}

.logo {
	font-size: .9rem;
	font-weight: 400;
	color: var(--text-color);
	letter-spacing: .1em
}
.logo img {
	height: 50px;
	width: auto
}
.sub_face,
.sub_face_sm{
  position: relative;
  top: 105px;
  margin:0 0 105px 0;
  height: 30vh;
  overflow: hidden;
  background: url(images/face_02.webp) no-repeat;
  background-position: center center;
  background-size: cover;
  /* transition: all 0.5s ease;
  animation:fadeInDown;
  animation-duration: 0.5s;
  animation-delay: 0.3s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;  */
  /* border-bottom:2px solid #00adec; */
}
.sub_face h2{
	color:#111;
	position: absolute;
	max-width:1280px;
	height: 1em;
	text-align: center;
	font-size: 2em;
	opacity: 0.9;
	letter-spacing: 0.3em;
	line-height: 1em;
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin:auto;
	text-shadow:0 0 3px #FFF,0 0 3px #FFF,0 0 3px #FFF,0 0 3px #FFF,0 0 3px #FFF,0 0 3px #FFF,0 0 3px #FFF,0 0 3px #FFF,0 0 3px #FFF,0 0 3px #FFF,0 0 3px #FFF,0 0 3px #FFF,0 0 3px #FFF,0 0 3px #FFF,0 0 3px #FFF,0 0 3px #FFF;
  }
  .sub_face h2 span{
	font-size: 1rem;
  }
@media (max-width:768px) {
	.navbar {
		display: block;
		padding: 1rem 0 .2rem 0
	}
	.logo img {
		height: 40px;
		width: auto
	}

	.footer-bottom-logo .logo img {
		display: none;
	}
	.sub_face,
	.sub_face_sm{
	position: relative;
	top: 90px;
	margin:0 0 90px 0;
	height: 20vh;
	overflow: hidden;
	background: url(images/face_02.webp) no-repeat;
	background-position: center center;
	background-size: cover;
	/* transition: all 0.5s ease;
	animation:fadeInDown;
	animation-duration: 0.5s;
	animation-delay: 0.3s;
	animation-timing-function: ease;
	animation-fill-mode: forwards;  */
	/* border-bottom:2px solid #00adec; */
	}
}
.nav-links a {
	text-decoration: none;
	color: var(--text-color);
	margin-left: 2rem;
	transition: color .3s ease
}
.nav-links a:hover {
	color: var(--primary-color)
}
.cta-button {
	background: var(--primary-color);
	color: #fff!important;
	padding: .5rem 1rem;
	border-radius: 5px;
	transition: background-color .3s ease
}
.cta-button:hover {
	background: var(--secondary-color)
}
.hero {
	padding: 8rem 5% 5rem;
	display: flex;
	align-items: center;
	min-height: 100vh;
	background: #fff;
	position: relative;
	overflow: hidden
}
.hero-background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url(images/main_bg.webp);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	opacity: .78;
	z-index: 1
}
.hero-content {
	position: relative;
	z-index: 3;
	flex: 1;
	padding-right: 2rem
}
.hero h2 {
	font-size: 2.5rem;
	line-height: 1.2;
	margin-bottom: 1.5rem;
	color: var(--text-color);
	text-shadow: 1px 1px 0 #eee, -1px 1px 0 #eee, -1px -1px 0 #eee, 1px -1px 0 #eee
}
.hero p {
	font-size: 1.2rem;
	margin-bottom: 2rem;
	color: #fff;
	text-shadow: 1px 1px 0 #4b5563, -1px 1px 0 #4b5563, -1px -1px 0 #4b5563, 1px -1px 0 #4b5563
}
.hero-image {
	position: relative;
	z-index: 3;
	flex: 1;
	animation: float 6s ease-in-out infinite
}
.hero-image img {
	max-width: 100%;
	border-radius: 10px;
	box-shadow: 0 20px 40px rgba(0, 0, 0, .1)
}
.services {
	padding: 5rem 5%;
	background: #fff;
	margin: 2rem auto;
	border-radius: 10px;
	max-width: 1200px;
	box-shadow: 0 10px 30px rgba(0, 104, 183, .1)
}
.section-heading {
	padding: 50px 0 5rem;
	position: relative;
	overflow: hidden
}
.section-heading .heading-line {
	width: 100%;
	max-width: 1280px;
	height: 2px;
	margin: 2em auto;
	background: linear-gradient(90deg, transparent, #333, transparent);
	transform: translateX(50%);
	position: relative;
	overflow: hidden
}
@keyframes lineSlide {
	0% {
		transform: translateX(-100%)
	}
	100% {
		transform: translateX(0)
	}
}
.services h2 {
	display: none
}
.contact {
	padding: 5rem 5%;
	background: #fff;
	margin: 2rem auto;
	border-radius: 10px;
	max-width: 1200px;
	box-shadow: 0 10px 30px rgba(0, 104, 183, .1)
}
.contact h2 {
	text-align: center;
	margin-bottom: 3rem
}
.contact-form {
	max-width: 600px;
	margin: 0 auto
}
.form-group {
	position: relative;
	margin-bottom: 2rem
}
.form-group input {
	width: 100%;
	padding: .8rem;
	border: 2px solid #ddd;
	border-radius: 5px;
	background: #fff;
	transition: border-color .3s ease
}
.form-group label {
	position: absolute;
	left: 1rem;
	top: 50%;
	transform: translateY(-50%);
	background: #fff;
	padding: 0 .5rem;
	color: #666;
	transition: all .3s ease
}
.form-group input:focus {
	border-color: var(--primary-color);
	outline: 0
}
.form-group input:focus~label, .form-group input:valid~label {
	top: -.5rem;
	font-size: .8rem;
	color: var(--primary-color)
}
footer {
	background: #f8f9fa;
	color: #2c3e50;
	padding: 4rem 5% 2rem
}
.footer-content {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 2rem;
	margin-bottom: 2rem
}
.footer-section h4 {
	margin-bottom: 1rem
}
.footer-section a {
	color: var(--primary-color);
	text-decoration: none;
	display: block;
	margin-bottom: .5rem;
	transition: color .3s ease
}
.footer-section a:hover {
	color: var(--secondary-color)
}
.social-links {
	display: flex;
	gap: 1rem
}
.social-links a {
	font-size: 1.5rem
}
.footer-bottom {
	text-align: center;
	padding-top: 2rem;
	border-top: 1px solid #e9ecef
}
@media (max-width:768px) {
	.hero {
		flex-direction: column;
		text-align: center;
		padding-top: 12.2rem
	}
	.hero-content {
		padding-right: 0;
		margin-bottom: 2rem
	}
	.hero h1 {
		font-size: 1.5rem
	}
	.nav-links {
		display: none
	}
}
@keyframes rise {
	0% {
		bottom: -100px;
		transform: translateX(0);
		opacity: 0
	}
	50% {
		opacity: .8;
		transform: translateX(-20px)
	}
	100% {
		bottom: 100%;
		transform: translateX(20px);
		opacity: 0
	}
}
@keyframes float {
	0% {
		transform: translateY(0)
	}
	50% {
		transform: translateY(-20px)
	}
	100% {
		transform: translateY(0)
	}
}
.nav-links a::after {
	background-color: var(--primary-color)
}
.about-page {
	padding: 8rem 5% 5rem;
	min-height: 100vh;
	position: relative;
	background: #fff
}
.about-container {
	position: relative;
	z-index: 2;
	max-width: 1200px;
	margin: 0 auto
}
.about-page h1 {
	text-align: center;
	margin-bottom: 3rem;
	color: var(--text-color)
}
.timeline {
	position: relative;
	padding: 2rem 0
}
.timeline::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 2px;
	height: 100%;
	background: var(--primary-color);
	opacity: .2
}
.timeline-item {
	position: relative;
	padding-left: 2rem;
	margin-bottom: 2rem
}
.timeline-item::before {
	content: '';
	position: absolute;
	left: -5px;
	top: 5px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--primary-color)
}
.timeline-item .date {
	font-weight: 700;
	color: var(--primary-color);
	margin-bottom: .5rem
}
.catch-phrase {
	margin-bottom: 2rem;
	text-shadow: 1px 1px 0 #eee, -1px 1px 0 #eee, -1px -1px 0 #eee, 1px -1px 0 #eee;
	letter-spacing: .3em
}
.hero h1.catch-main {
	font-size: 4rem;
	font-weight: 700;
	color: var(--accent-color);
	display: block;
	margin-bottom: .5rem;
	letter-spacing: 0;
	/* animation: fadeInUp 1s ease-out; */
	stroke: #fff;
	stroke-width: 2px
}
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(30px)
	}
	to {
		opacity: 1;
		transform: translateY(0)
	}
}
.hero-buttons {
	display: flex;
	gap: 1rem;
	margin-top: 2rem
}
.primary-button {
	background: var(--primary-color);
	color: #fff;
	border: none;
	padding: 1rem 2rem;
	border-radius: 5px;
	cursor: pointer;
	font-size: 1rem;
	transition: all .3s ease
}
.outline-button {
	background: 0 0;
	color: var(--primary-color);
	border: 2px solid var(--primary-color);
	padding: 1rem 2rem;
	border-radius: 5px;
	cursor: pointer;
	font-size: 1rem;
	transition: all .3s ease;
	background: rgba(255, 255, 255, .8)
}
.primary-button:hover {
	background: var(--secondary-color);
	transform: translateY(-2px)
}
.outline-button:hover {
	background: var(--primary-color);
	color: #fff;
	transform: translateY(-2px)
}
@media (max-width:768px) {

	.hero h2 {
		font-size: 1.5rem;
	}
	.hero-buttons {
		flex-direction: column
	}
}
.access {
	padding: 5rem 5%;
	background: #fff;
	margin: 2rem auto;
	border-radius: 10px;
	max-width: 1200px;
	box-shadow: 0 10px 30px rgba(0, 104, 183, .1)
}
.access h2 {
	text-align: center;
	margin-bottom: 3rem
}
.access-container {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 2rem
}
.map-container {
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 5px 15px rgba(0, 104, 183, .1)
}
.map-container iframe {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 400px
}
@media (max-width:768px) {
	.access-container {
		grid-template-columns: 1fr
	}
	.map-container {
		order: 1
	}
	.map-container iframe {
		height: 300px
	}
}



.btn_01, .c_btn a, .outline-button, .primary-button, .w_btn button {
	display: inline-block;
	padding: 10px 20px;
	border-radius: 5px;
	transition: all .3s ease;
	cursor: pointer;
	text-decoration: none
}
table.menu {
	width: 100%;
	border-collapse: collapse
}
 table.menu th {
	padding: 10px;
}
.about-page h1, .article h1, .article h2, .article h3 {
	position: relative;
	margin-bottom: 1.5em;
	line-height: 1.4
}

@media screen and (max-width:1023px) {
	.hero-background {

		background-image: url(images/main_bg_sm.webp);

	}

}


/* Loading アイコンの大きさ設定　*/
#splash_logo img {
  width: 400px;
}
@media screen and (max-width: 1023px) {
    #splash_logo img {
        width: 80%;
    }
}
#splash.fadein,
#splash_logo.fadein {
  visibility: visible;
  opacity: 1;
}

#splash_logo.fadein img {
  /* animation:3s linear infinite rotation1; */
}

#splash.fadein.fadeout,
#splash_logo.fadein.fadeout {
  visibility: hidden;
  opacity: 0;
}

@keyframes text_anime_on {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.eachTextAnime span {
  opacity: 0;
}

.eachTextAnime span {
  animation: text_anime_on 1s ease-out forwards;
}

.eachTextAnime span {
  opacity: 0;
  animation: text_anime_on 1s ease-out forwards;
  animation-delay: 1s;
}



.ani-fadeIn.animated {
  opacity: 1 !important;
  transition: opacity 3s cubic-bezier(0.155, 0.91, 0.695, 0.95);
}

.ani-fadeInUp {
  position: relative;
  transform: translate(0, 140px);
  transition: opacity 1s cubic-bezier(0.155, 0.91, 0.695, 0.95), transform 1s cubic-bezier(0.155, 0.91, 0.695, 0.95);
}

.ani-fadeInUp.animated {
  opacity: 1 !important;
  transform: translate(0, 0);
}

.ani-fadeInRight {
  position: relative;
  transform: translate(140px, 0);
  transition: opacity 1s cubic-bezier(0.155, 0.91, 0.695, 0.95), transform 1s cubic-bezier(0.155, 0.91, 0.695, 0.95);
}

.ani-fadeInRight.animated {
  opacity: 1 !important;
  transform: translate(0, 0);
}

.ani-fadeInLeft {
  position: relative;
  transform: translate(-140px, 0);
  transition: opacity 1s cubic-bezier(0.155, 0.91, 0.695, 0.95), transform 1s cubic-bezier(0.155, 0.91, 0.695, 0.95);
}

.ani-fadeInLeft.animated {
  opacity: 1 !important;
  transform: translate(0, 0);
}

/* 泡アニメーション用のスタイル */
.bubble-container {
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
}

.bubble {
  --violet: violet;
  --blue: #0ff;
  position: absolute;
  bottom: -100px;
  background: rgba(206, 182, 88, 0.2);
  box-shadow: inset 0 0 50px #fff, inset 20px 0 60px var(--violet), inset -20px 0 60px var(--blue), inset 20px 0 300px var(--violet), inset -20px 0 300px var(--blue), 0 0 50px #fff, -10px 0 60px var(--violet), 10px 0 60px var(--blue);
  border-radius: 50%;
  animation: rise 10s infinite ease-in;
  opacity: 0;
}

.bubble:nth-child(1) {
  left: 10%;
  width: 80px;
  height: 80px;
  animation-duration: 8s;
  animation-delay: 1s;
}

.bubble:nth-child(2) {
  left: 20%;
  width: 60px;
  height: 60px;
  animation-duration: 10s;
  animation-delay: 2s;
}

.bubble:nth-child(3) {
  left: 35%;
  width: 40px;
  height: 40px;
  animation-duration: 7s;
  animation-delay: 3s;
}

.bubble:nth-child(4) {
  left: 50%;
  width: 70px;
  height: 70px;
  animation-duration: 11s;
  animation-delay: 4s;
}

.bubble:nth-child(5) {
  left: 65%;
  width: 50px;
  height: 50px;
  animation-duration: 9s;
  animation-delay: 2s;
}

.bubble:nth-child(6) {
  left: 80%;
  width: 45px;
  height: 45px;
  animation-duration: 12s;
  animation-delay: 1s;
}

.bubble:nth-child(7) {
  left: 90%;
  width: 55px;
  height: 55px;
  animation-duration: 8s;
  animation-delay: 3s;
}

/* ローディング画面のスタイル */
.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}

.loading.hidden {
  opacity: 0;
  visibility: hidden;
}

.loading-content {
  text-align: center;
  position: relative;
  width: 200px;
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid var(--primary-color);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 20px;
}

.loading-text {
  font-size: 1.2rem;
  color: var(--primary-color);
  position: absolute;
  width: 200px;
  text-align: center;
  top: 60px;
  left: 0;
  right: 0;
  margin: auto;
}

.loading-text span {
  display: inline-block;
  animation: bounce 1.4s infinite;
  opacity: 1;
  color: var(--primary-color);
}

.loading-text span:nth-child(2) {
  animation-delay: 0.1s;
}

.loading-text span:nth-child(3) {
  animation-delay: 0.2s;
}

.loading-text span:nth-child(4) {
  animation-delay: 0.3s;
}

.loading-text span:nth-child(5) {
  animation-delay: 0.4s;
}

.loading-text span:nth-child(6) {
  animation-delay: 0.5s;
}

.loading-text span:nth-child(7) {
  animation-delay: 0.6s;
}

.loading-text span:nth-child(8) {
  animation-delay: 0.7s;
}

.loading-text span:nth-child(9) {
  animation-delay: 0.8s;
}

.loading-text span:nth-child(10) {
  animation-delay: 0.9s;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
    opacity: 0.5;
  }
  50% {
    transform: translateY(-10px);
    opacity: 1;
  }
}
.ani-CharAnimation {
  text-align: center;
  font-size: 2em;
}

.ani-CharAnimation span {
  margin-right: 0.3em;
}

.ani-CharAnimation .char {
  opacity: 0;
  transform: translateY(50px) rotate(30deg);
  display: inline-block;
}

.ani-CharAnimation.animated .char {
  animation: charAnimation 0.5s ease forwards;
}

.ani-CharAnimation.animated .char:nth-child(1) {
  animation-delay: 0.1s;
}

.ani-CharAnimation.animated .char:nth-child(2) {
  animation-delay: 0.2s;
}

.ani-CharAnimation.animated .char:nth-child(3) {
  animation-delay: 0.3s;
}

.ani-CharAnimation.animated .char:nth-child(4) {
  animation-delay: 0.4s;
}

.ani-CharAnimation.animated .char:nth-child(5) {
  animation-delay: 0.5s;
}

.ani-CharAnimation.animated .char:nth-child(6) {
  animation-delay: 0.6s;
}

.ani-CharAnimation.animated .char:nth-child(7) {
  animation-delay: 0.7s;
}

.ani-CharAnimation.animated .char:nth-child(8) {
  animation-delay: 0.8s;
}

.ani-CharAnimation.animated .char:nth-child(9) {
  animation-delay: 0.9s;
}

.ani-CharAnimation.animated .char:nth-child(10) {
  animation-delay: 1s;
}

.ani-CharAnimation.animated .char:nth-child(11) {
  animation-delay: 1.1s;
}

.ani-CharAnimation.animated .char:nth-child(12) {
  animation-delay: 1.2s;
}

.ani-CharAnimation.animated .char:nth-child(13) {
  animation-delay: 1.3s;
}

.ani-CharAnimation.animated .char:nth-child(14) {
  animation-delay: 1.4s;
}

.ani-CharAnimation.animated .char:nth-child(15) {
  animation-delay: 1.5s;
}

.ani-CharAnimation.animated .char:nth-child(16) {
  animation-delay: 1.6s;
}

.ani-CharAnimation.animated .char:nth-child(17) {
  animation-delay: 1.7s;
}

.ani-CharAnimation.animated .char:nth-child(18) {
  animation-delay: 1.8s;
}

.ani-CharAnimation.animated .char:nth-child(19) {
  animation-delay: 1.9s;
}

.ani-CharAnimation.animated .char:nth-child(20) {
  animation-delay: 2s;
}

@keyframes charAnimation {
  0% {
    opacity: 0;
    transform: translateY(50px) rotate(30deg);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
  }
}
.text-rotate-container {
  position: relative;
  height: 6rem;
  overflow: hidden;
}

.text-rotate {
  position: absolute;
  font-size: 2.5rem;
  font-weight: 600;
  color: var(--secondary-color);
  opacity: 0;
  animation: rotateText 9s linear infinite;
  width: 100%;
  left: 0;
}

.text-rotate:nth-child(2) {
  animation-delay: 3s;
}

.text-rotate:nth-child(3) {
  animation-delay: 6s;
}

@keyframes rotateText {
  0%, 20% {
    opacity: 0;
    transform: translateY(50px);
  }
  25%, 45% {
    opacity: 1;
    transform: translateY(0);
  }
  50%, 100% {
    opacity: 0;
    transform: translateY(-50px);
  }
}
/* レスポンシブ対応 */
@media (max-width: 768px) {
  .text-rotate {
    font-size: 1.5rem;
  }
  .ani-fadeIn {
    opacity: 1;
  }
  .ani-fadeIn.animated {
    opacity: 1 !important;
    transition: opacity 3s cubic-bezier(0.155, 0.91, 0.695, 0.95);
  }
  .ani-fadeInUp {
    position: relative;
    opacity: 1;
    transform: translate(0, 0);
    transition: opacity 1s cubic-bezier(0.155, 0.91, 0.695, 0.95), transform 1s cubic-bezier(0.155, 0.91, 0.695, 0.95);
  }
  .ani-fadeInUp.animated {
    opacity: 1 !important;
    transform: translate(0, 0);
  }
  .ani-fadeInRight {
    position: relative;
    transform: translate(0, 0);
    transition: opacity 1s cubic-bezier(0.155, 0.91, 0.695, 0.95), transform 1s cubic-bezier(0.155, 0.91, 0.695, 0.95);
    opacity: 1;
  }
  .ani-fadeInRight.animated {
    opacity: 1 !important;
    transform: translate(0, 0);
  }
  .ani-fadeInLeft {
    position: relative;
    transform: translate(0, 0);
    transition: opacity 1s cubic-bezier(0.155, 0.91, 0.695, 0.95), transform 1s cubic-bezier(0.155, 0.91, 0.695, 0.95);
    opacity: 1;
  }
  .ani-fadeInLeft.animated {
    opacity: 1 !important;
    transform: translate(0, 0);
  }
}
img {
  max-width: 100%;
  height: auto;
}

img.border-round {
  border-radius: 1rem;
}

.mt-2 {
  margin-top: 2rem !important;
}

.toparea4_p01 {
  font-size: 1.2rem;
  line-height: 1.5;
  margin: 0 0 1em 0;
}

.sp_big {
  font-size: 1.5rem;
  font-weight: 900;
  color: teal;
}

.p_st_01 {
  font-size: 2rem;
  font-weight: 900;
  background: rgb(220, 138, 96);
  color: #FFF;
  padding: 0.5rem;
  max-width: 800px;
  margin: 0 auto;
}

#main {
  position: relative;
}

#main .ab_img {
  position: absolute;
  width: 30px;
  height: 30px;
  z-index: -1;
}

.catch-phrase {
  margin-bottom: 2rem;
}

.check li {
  font-size: 1.2rem;
  font-weight: 900;
  list-style: none;
  margin: 0.5rem 0;
}
.check li i {
  margin-right: 1rem;
}

.check2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin: 2rem auto;
  gap: 1rem;
}
.check2 li {
  width: 28%;
  font-size: 1.2rem;
  font-weight: 900;
  list-style: none;
  margin: 0.5rem 0;
  border: 2px solid yellowgreen;
  border-radius: 1rem;
  padding: 0.5rem 1rem;
}
.check2 li i {
  margin-right: 1rem;
}

table {
  margin-bottom: 20px;
  max-width: 100%;
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

table tr:nth-of-type(2n+1) {
  background-color: #DDD;
}

table:not(.has-border-color) :where(th, td) {
  border: 1px solid #f0f0f0;
}

table.cal {
  margin-bottom: 20px;
  max-width: 100%;
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}
table.cal th {
  background: #64b066;
  color: white;
  position: relative;
  padding: 0.5em;
  text-align: center;
  font-weight: 500;
}
table.cal td {
  background: #FFF;
  position: relative;
  padding: 0.5em;
  text-align: center;
}
table.cal td:first-child {
  background: #64b066;
  color: white;
  font-weight: 500;
}

.wrap_box {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

.wrap_box2 {
  max-width: 980px;
  width: 100%;
  padding: 5px 20px;
  margin: 0 auto;
}

.toparea4_box_text {
  background: #75a976;
  color: #FFF;
  padding: 1rem;
  border-radius: 1rem;
  margin: 1rem auto;
  font-size: 1.5rem;
  max-width: 600px;
  font-weight: 900;
  width: 80%;
}

.toparea4_box_text2 {
  background: #FFF;
  padding: 2rem;
  border-radius: 1rem;
  margin: 1rem auto;
  font-size: 1.2rem;
  max-width: 800px;
  width: 90%;
  text-align: left;
}

.about_st01 dt,
.about_st01 dd {
  padding: 10px;
  margin: 0;
  text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
}

.about_st01 dt {
  font-size: 1.6em;
  color: #2f4430;
}

.about_st01 dt span {
  font-size: 1.5em;
  color: #75a976;
  margin-right: 0.1em;
}

.about_st01 dd {
  border-bottom: 2px dashed #ccc;
  padding: 0 20px 10px 20px;
}

ul.about_rokusou_a {
  margin: 0 0 2em 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

ul.about_rokusou_a li {
  list-style: none;
  margin: 0 2%;
  width: 21%;
  text-align: center;
}

.s_text_01 {
  font-size: 1.4rem;
  line-height: 1.5;
  font-weight: 900;
  margin: 0 0 1em 0;
}

.check-container {
  width: 100%;
  margin: 0 auto;
  padding: 2rem;
  font-size: 1.2rem;
  line-height: 1.5;
  text-align: center;
  max-width: 1000px;
  background: #f7f4e9;
  border-radius: 1rem;
}

.check-container2 {
  width: 100%;
  margin: 0 auto;
  padding: 2rem;
  font-size: 1.2rem;
  line-height: 1.5;
  text-align: center;
  max-width: 800px;
  background: #f7f4e9;
  border-radius: 1rem;
}

.check-container3_wrap {
  background: #FFF;
  margin-top: 5rem;
  padding: 2rem;
}

.check-container3 {
  width: 100%;
  margin: 0 auto;
  padding: 2rem;
  font-size: 1.2rem;
  line-height: 1.5;
  text-align: center;
  max-width: 1280px;
}

.check_img {
  width: 30%;
  position: relative;
}
.check_img img {
  position: absolute;
  left: 2em;
}

.check_text {
  width: 70%;
  text-align: left !important;
  background: #FFF;
  border-radius: 1rem;
  padding: 2rem 2rem 2rem 4rem;
}

.check_img2 {
  width: 50%;
}
.check_img2 img {
  aspect-ratio: 1/1;
  object-fit: cover;
  width: 60%;
}

.check_text2 {
  width: 50%;
  text-align: left !important;
}

.check li {
  font-size: 1.2rem;
  font-weight: 900;
  list-style: none;
  margin: 0.5rem 0;
}
.check li i {
  margin-right: 1rem;
}

.check2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin: 2rem auto;
  gap: 1rem;
}
.check2 li {
  font-size: 1.2rem;
  font-weight: 900;
  list-style: none;
  margin: 0.5rem 0;
  width: 28%;
  border: 2px solid yellowgreen;
  border-radius: 1rem;
  padding: 0.5rem 1rem;
}
.check2 li i {
  margin-right: 1rem;
}

table {
  margin-bottom: 20px;
  max-width: 100%;
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}



.wrap_box {
  width: 100%;
  margin: 0 auto;
  max-width: 900px;
}

.wrap_box2 {
  width: 100%;
  margin: 0 auto;
  max-width: 980px;
  padding: 5px 1rem;
}

.top_sns {
  text-align: right;
  margin-top: 0.8em;
  justify-content: flex-end;
  padding-right: 20px;
}

.top_sns a.inq, .top_sns a.inq2 {
  display: inline-block;
  position: fixed;
  margin-left: 0.8em;
  border-radius: 8px 0 0 8px;
  background: #64b066;
  text-decoration: none;
  text-align: center;
  color: #fff;
  font-size: 0.9em;
  font-weight: 600;
  height: 130px;
  width: 40px;
  line-height: 40px;
  right: 0;
  bottom: 4em;
  z-index: 210;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  text-align: center;
}

.top_sns a.inq {
  right: 0;
  bottom: 300px;
}

.top_sns a.inq2 {
  right: 0;
  bottom: 150px;
}

.top_sns a.inq i, .top_sns a.inq2 i {
  font-size: 1.3em;
  margin-bottom: 0.5em;
}

.ab_img {
  position: absolute;
  width: 50px;
  height: 50px;
  z-index: -1;
}

.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  padding: 1rem 5%;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 100;
  box-shadow: 0 2px 15px rgba(0, 104, 183, 0.1);
}

.path-animation-section {
  padding: 100px 0;
  overflow: hidden;
}

.voice-container {
  width: 100%;
  margin: 0 auto;
  padding: 2rem;
  font-size: 1.2rem;
  line-height: 1.5;
  text-align: center;
  max-width: 1000px;
  background: #f7f4e9;
  border-radius: 1rem;
}

.toparea3_box2 {
  width: 50%;
  max-width: 800px;
  margin: 0 auto;
  padding: 30px;
  text-align: left;
}

.toparea3 div.toparea3_box2 {
  text-align: left;
}

.toparea3 div.toparea3_box2 .splide__slide {
  text-align: left;
}

.toparea3_box3_img {
  width: 50%;
  max-width: 400px;
  margin: 0 auto;
}
.toparea3_box3_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.toparea3_box3 p {
  text-align: left;
  padding: 2rem;
  background: #FFF;
  border-radius: 1rem;
}

.youtube {
  padding: 2rem;
}

.review01, .review02 {
  position: relative;
  padding: 15px;
  margin: 20px 0;
  border-radius: 8px;
  background: #FFF;
}

.review01:before, .review02:before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
}

.review01:before {
  left: -10px;
  top: 50%;
  transform: translateY(-50%);
  border-width: 10px 10px 10px 0;
  border-color: transparent #FFF transparent transparent;
}

.review02:before {
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent #FFF;
}
br.sm{
	display: none;
}

@media (min-width: 769px) and (max-width: 1280px) {
  .catch-main {
    font-size: 2.8rem;
  }
  .text-rotate {
    font-size: 1.5rem;
  }
  .hero h1 {
    font-size: 2.2rem;
  }
}
@media (max-width: 768px) {
	br.sm{
		display: block;
	}
  .logo {
    font-size: 0.7rem;
    text-align: left;
    padding-left: 1rem;
  }
  .check-container {
    padding: 0.5rem;
  }
  .check-container2 {
    padding: 0.5rem;
  }
  .check-container3 {
    padding: 0.5rem;
  }
  .check-container3_wrap {
    margin-top: 3rem;
    padding: 0.5rem;
  }
  .check_img,
  .check_img2 {
    width: 100%;
    height: auto;
    position: relative;
  }
  .check_img2 {
    order: 1;
  }
  .check_text2 {
    order: 2;
  }
  .check_text,
  .check_text2 {
    width: 100%;
    position: relative;
    padding: 1rem;
  }
  .check_img img {
    position: absolute;
    left: 0;
    right: 0;
    width: 40%;
    top: 2em;
    margin-top: -2em;
  }
  .check li {
    font-size: 1.1rem;
    font-weight: 900;
    list-style: none;
    margin: 0.5rem 0;
  }
  ul.check,
  ul.check2 {
    padding-left: 0;
  }
  .check2 li {
    font-size: 0.9rem;
    font-weight: 900;
    list-style: none;
    margin: 0;
    width: 44%;
    border: 2px solid yellowgreen;
    border-radius: 0.5rem;
    padding: 0.2rem 0.5rem;
  }
  .top_sns {
    text-align: center;
    margin-top: 0.8em;
    justify-content: flex-end;
    padding-right: 20px;
  }
  .top_sns a.inq, .top_sns a.inq2 {
    display: inline-block;
    position: fixed;
    margin-left: 0;
    border-radius: 0;
    background: #64b066;
    text-decoration: none;
    text-align: center;
    color: #fff;
    font-size: 0.9em;
    font-weight: 600;
    height: 40px;
    width: 40%;
    line-height: 40px;
    right: 0;
    bottom: 0;
    z-index: 210;
    -ms-writing-mode: horizontal-tb;
    writing-mode: horizontal-tb;
    text-align: center;
  }
  .top_sns a.inq {
    left: 1%;
    bottom: 0;
  }
  .top_sns a.inq2 {
    right: 17%;
    bottom: 0;
  }
  .top_sns a.inq i, .top_sns a.inq2 i {
    font-size: 1.3em;
    margin-bottom: 0;
    margin-right: 0.5em;
  }
  .content, .main, .sidebar, .wrap {
    width: 100%;
    padding: 0 3px;
  }
  .toparea4_box_text {
    font-size: 1.1rem;
  }
  .about_st01 dt {
    font-size: 1.2em;
    color: #2f4430;
  }
  .about_st01 dt span {
    font-size: 1.2em;
    color: #75a976;
    margin-right: 0.1em;
  }
  .path-animation-section {
    padding: 20px 0;
  }
  .p_st_01 {
    font-size: 1.2rem;
    padding: 0.5rem;
  }
  .youtube {
    padding: 1rem;
  }
  .toparea3_box2 {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 1rem;
    text-align: left;
  }
  .section-heading {
    padding: 1rem 0;
    position: relative;
    overflow: hidden;
  }
  .voice-container {
    padding: 0.5rem;
  }
  .ani-CharAnimation {
    text-align: center;
    font-size: 1.5rem;
  }
  .ani-CharAnimation .char {
	opacity: 1;
    transform: translateY(0px) rotate(0deg);
	font-size: 1.2rem;
	font-weight: bold;
  }
}