﻿#fakeloader .fl{
	width: 80%!important;
	max-width: 500px;
}
#fakeloader {display: none;}
#bottom_info.effect_t-container{transform: translate(0,0px)!important;opacity: 1!important;}

/* =============================================
　　loader
============================================= */
#loader{
	top: 0;
	left: 0;
	z-index: 9999;
	background-size: cover;
}
#loader::before{
	position: absolute;
    z-index: 10;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
	background-color: #fff!important;
	opacity: 1;
	animation-name: loader_hide;
	animation-duration: .3s;
	animation-fill-mode: forwards;
	animation-timing-function: ease;
	animation-iteration-count: 1;
}
@keyframes loader_hide {
	0% {opacity: 1;}
	100% {opacity: 0;}
}
#loader::after {
    position: absolute;
    z-index: 0;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
	background-color: rgba(255,155,49,0.63)!important;
}
.load_logo{width: 90%;z-index: 5;text-align: center}

#loader.top::after{background-color: #fff!important;}

#loader.top .load_logo{width: 100%}
.load_logo figure{
	position: absolute!important;
	max-width: 400px;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

.load_logo .title{
	animation-name: loader;
	animation-duration: 1s;
	animation-timing-function: ease;
	animation-iteration-count: 1;
	
}
@keyframes loader {
	0% {opacity: 0;transform: scale(0.8);}
	100% {opacity: 1;ransform: scale(1);}
}
#loading_line,#loading_bg{
	left: 0;
	top: 0;
	margin: auto;
	height: 100%;
	-webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
    transition: -webkit-transform .75s cubic-bezier(0.3, 1, 0.1, 1);
    transition: transform .75s cubic-bezier(0.3, 1, 0.1, 1);
    transition: transform .75s cubic-bezier(0.3, 1, 0.1, 1), -webkit-transform .65s cubic-bezier(0.3, 1, 0.1, 1);
	z-index: 2;
}
#loading_bg{z-index: 3;transition-delay: .1s}
#loader.load_bg #loading_line,#loader.load_bg #loading_bg{transform: scaleX(1);}


/* =============================================
　　共通
============================================= */
.font_14 {font-size: 18px;}
.font_12 {font-size: 17px;}
.font_100per{font-size: 18px;}
#pc_nav li{font-size: 20px;}
#contents .box_wrap .box:nth-child(odd) .contents_title h3,#contents .box_wrap .box:nth-child(even) .contents_title h3,.bg_color4 h2.stripe .effect_t-item.active,#top_cms_box .font_24,#bottom_info_item .font_24{font-size: 26px;}
#page_title .font_24{font-size: 30px;}
#menu_bt .font_20{font-size: 24px;}
#bottom_menu .flex_space-around{justify-content: center;}
#bottom_menu .font_14 {font-size: 18px;}
#footer_wrap .font_24 {font-size: 30px;}
#footer_wrap .width_300-max {max-width: 350px;}



/* color ---------------------------------------------------------------------------------------------*/
.linkStyle{color: #ff9b31;transition: opacity .3s;}
.linkStyle:hover{opacity: 0.7}
body,.txt_color_nomal{color: #333333;}
.txt_white{color: white;}
.txt_red{color: red;}
.txt_color1{color: #ff9b31} /* メインカラー */
.txt_color2{color: #fff5eb} /* サブカラー */
.txt_color3{color: #1177e4} /* アクセントカラー1 */
.txt_color4{color: #f7f7f7} /* アクセントカラー2 */

/* background-color */
.bg_white{background-color: white} /* 白背景 */
.bg_black{background-color: black} /* 黒背景 */
.bg_color1{background-color: #ff9b31} /* メインカラー */
.bg_color2{background-color: #fff5eb} /* サブカラー */
.bg_color3{background-color: #1177e4} /* アクセントカラー1 */
.bg_color4{background-color: #f7f7f7} /* アクセントカラー2 */
.bg_color_clear{background-color: transparent!important}

/* border-color ※!important */
.border_color1{border-color: #ff9b31}
.border_color2{border-color: #fff5eb}
.border_color3{border-color: #1177e4}
.border_color4{border-color: #d2d2d2}

/* hover_color */
.hvr_txt_color_nomal:hover{color: #333333;}
.hvr_txt_white:hover{color: white;}
.hvr_txt_red:hover{color: red;}
.hvr_txt_color1:hover{color: #ff9b31} /* メインカラー */
.hvr_txt_color2:hover{color: #fff5eb} /* サブカラー */
.hvr_txt_color3:hover{color: #1177e4} /* アクセントカラー1 */
.hvr_txt_color4:hover{color: #f7f7f7} /* アクセントカラー2 */

.hvr_bg_white:hover{background-color: white} /* 白背景 */
.hvr_bg_black:hover{background-color: black} /* 黒背景 */
.hvr_bg_color1:hover{background-color: #ff9b31} /* メインカラー */
.hvr_bg_color2:hover{background-color: #fff5eb} /* サブカラー */
.hvr_bg_color3:hover{background-color: #1177e4} /* アクセントカラー1 */
.hvr_bg_color4:hover{background-color: #f7f7f7} /* アクセントカラー2 */
.hvr_bg_color_clear:hover{background-color: transparent!important}

.hvr_border_color1:hover{border-color: #ff9b31}
.hvr_border_color2:hover{border-color: #fff5eb}
.hvr_border_color3:hover{border-color: #1177e4}
.hvr_border_color4:hover{border-color: #d2d2d2}


/* design ---------------------------------------------------------------------------------------------*/
#fakeloader{background-color: #ffffff;}
.stripe:after {
    background-image: linear-gradient( -45deg, transparent 25%, rgba(255,155,49,0.30) 25%, rgba(255,155,49,0.30) 50%, transparent 50%, transparent 75%, rgba(255,155,49,0.30) 75%, rgba(255,155,49,0.30))!important;
}
#contents .box:nth-of-type(odd) .contents_title::after {
    background-color: rgba(255,155,49,0.7)!important;
}
#bottom_info .stripe:after, #page_title .stripe:after {
    background-image: linear-gradient( -45deg, transparent 25%, rgba(255,255,255,0.30) 25%, rgba(255,255,255,0.30) 50%, transparent 50%, transparent 75%, rgba(255,255,255,0.30) 75%, rgba(255,255,255,0.30) )!important;
}
#page_title::after {
    background-color: rgba(255,155,49,0.63)!important;
}
#header .logo img{max-width: 355px;}
#menu_bt li::after{background-color: rgba(255,155,49,0.67)!important;}

footer.bg_color1 {background-color: #f7f7f7;}
footer.txt_white {color: #333;}
#copyright,#copyright .txt_white {color: #fff;}
footer .txt_white {color: #ff9b31;}
footer .tel .txt_white {color: #ff9b31;}

.more div::after {border: 1px solid rgba(255,155,49,0.90)!important;}
.more div::before {background-color: rgba(255,155,49,0.13)!important;}
#bottom_info_w::after {background-color: rgba(105,122,132,0.59)!important;}
#bottom_info_w .more div::after {border-color: rgba(255,255,255,0.60)!important;}
#bottom_info_w .more div::after {border-color: rgba(255,255,255,0.60)!important;}
#bottom_info_w .more div::before {background-color: rgba(255,255,255,0.10)!important;}

#bottom_info .more div::after, #footer .more div::after {border-color: rgba(255,155,49,0.60);}
#bottom_info .more div::before, #footer .more div::before {background: rgba(255,155,49,0.10);}
#page10 .border_color2{border-color: rgba(255,155,49,0.90);}



/* cms ---------------------------------------------------------------------------------------------*/
.cate_list li{
	width: 45%;
	margin-right: 1%!important;
	margin-left: 1%!important;
}
#cms_3-e .sub_cate_title {
	font-weight: bold;
    color: #ff9b31;
}
#cms_3-e .border_color3 {
    border-color: #b1b1b1;
	font-weight: bold;
}
#cms_2-c .cate_title {
    color: #484848;
    border-color: #1177e4;
    background-color: #e9edf1;
	padding-left: 17px;
}
#cms_2-c .cate_box {
	border: 1px solid #c2c6ca;
    padding: 0;
    margin-bottom: 45px;
	box-shadow: 2px 2px 0 0 #e9edf1;
}
#cms_2-d .cate_title {
    color: #484848;
	padding-left: 17px;
}
.sub_cate_txt1{padding-bottom: 50px}
.sub_cate_txt1:empty{display: none}

/* YouTube */
.yt{width: 100%;box-sizing: border-box;}
.video_cms{
	padding-bottom: 61.25%;
	height: 0;
}
#cms_3-e .video_cms, #cms_2-c .video_cms, #cms_2-d .cate_box .video_cms {
    padding-bottom: 40.25%;
    height: 0;
    width: 60%!important;
}

/* バナーCMS */
.cate_btn_container a, .btn_container a{padding: 8px 30px;}
.cate_btn_container{
    margin-bottom: 69px;
    margin-top: -15px;
    padding: 0 5%;
}


/* scrollanim ---------------------------------------------------------------------------------------------*/
.effect_t-item{transition: transform 2s .5s ease,opacity 2s .5s ease;}
.block_anime-container .contents_title{transition: all 2s .5s ease;}
.effect_t-container{transition: all 2s .5s ease;}
#contents .effect_t-container.animsp {opacity: 1;transform: translate(0,0px);}
.cms_title.effect_t-item,#bottom_info_item .effect_t-item{transition: transform 2s .3s ease,opacity 2s .3s ease;}



/*----------------------------------------------
			2021.01.29 修正
----------------------------------------------*/
.sns.h_sns {
    position: fixed;
    top: 42px;
    right: 116px;
    z-index: 999;
}
.sns.h_sns a {
    display: block;
    width: 50px;
    height: 50px;
    position: relative;
}
.sns.h_sns a i {
    width: 30px;
    height: 30px;
}
.sns.h_sns .line a{background-color: #00b900;}
.sns.h_sns a img {
    width: 30px;
    height: 30px;
}
.b_links{display: block!important}
.b_links .sns_links li {max-width: 50px;}
.b_links .sns_links img {max-width: 100%!important;}

.sns_wrap{display: none;}

#video{height: 100vh;}
#main_img{max-height: inherit}
#page_title{margin-top: 162px;}


/* header ---------------------------------------------------------------------------------------------*/
#pc_nav a::before,.con_box::before,#contents4 a .con_txt::before,.cms_title::before,.more a::before,.more a::after,#contents4 a::before,.cate_list li::before,.pager .prev a::before,.pager .next a::before{
	position: absolute;
	content: "";
	display: block;
	pointer-events: none
}
#header{
	z-index: 101;
	background: -webkit-linear-gradient(to bottom, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0))!important;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0))!important;
}
header h1 img{max-width: 377px;}
header #main_img{z-index: -1}
#header{
	background: -moz-linear-gradient(top, rgba(0,0,0,0.8), transparent);
	background: -webkit-linear-gradient(top, rgba(0,0,0,0.8), transparent);
	background: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent);
	z-index: 10;
	height: 150px;
	top: 0;
}

header .menu_stick{
	height: 16px;
	top: 60px;
	right: 48px;
	cursor: pointer;
	z-index: 101
}
header .menu_stick.stick_trans span{
	-webkit-transform: rotate(135deg);
	-ms-transform: rotate(135deg);
	transform: rotate(135deg);
	margin: 0;
}
header .menu_stick.stick_trans{
	padding-top: 4px
}
header .menu_stick.stick_trans span:first-child{
	opacity: 0;
}
header .menu_stick.stick_trans span:last-child{
	-webkit-transform: rotate(-135deg);
	-ms-transform: rotate(-135deg);
	transform: rotate(-135deg);
	margin-top: -3px
}
#sp_nav{
	z-index: 100;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background-color: rgba(255,255,255,0.7)
}
#sp_nav nav{
	box-sizing: border-box;
	top: 20px;
	right: 20px;
	bottom: 20px;
	left: 20px;
}
.tel_bt{
	background-color: rgba(255,255,255,0.1);
	border: solid 1px rgba(255,255,255,0)
}
.tel_bt:hover{
	background-color: rgba(255,255,255,0);
	border: solid 1px rgba(255,255,255,0.2)
}
#sp_nav img {
	width: auto;
	height: auto;
	min-width: 100%;
	min-height: 100%;
	max-width: inherit;
}

header .scroll_d{
	width: 1px;
	height: 150px;
	right: 0;
	left: 0;
	bottom: 0;
	margin: auto;
}
header .scroll_d span{
	width: 1px;
	height: 100%;
	background-color: rgba(255,255,255,0.4)
}
header .scroll_d span::before{
	position:absolute;
	content: "";
	display: block;
	width: 100%;
	background-color: #fff;
	animation: line 4s ease 0s infinite;
}
@keyframes line {
	0% {
		bottom: 150px;
		height: 0;
	}
	20% {
		bottom: 0;
		height: 150px;
	}
	40% {
		bottom: 0;
		height: 0;
	}
	100% {
		bottom: 0;
		height: 0;
	}
}

#pc_nav{left: 40px;bottom: 100px}
#pc_nav a{text-shadow: 0 4px 5px rgba(0,0,0,1.0)}
#pc_nav a:hover{padding-left: 50px}
#pc_nav a::before{
	width: 20px;
	height: 1px;
	background-color: #fff;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	transition: 0.5s
}
#pc_nav a:hover::before{width: 30px;}
#pc_nav li a:hover::after{display: none!important}

#calendar .more {max-width: 250px;}
.calendar_btn{
	width: 247px;
    margin-bottom: 50px;
    margin-top: -30px;
}
#calendar .c_bnr{width: 600px;}



/* IE */
@media all and (-ms-high-contrast: none){ 
.cate_btn_container a, .btn_container a{padding: 10px 30px 4px;}
#calendar .more {padding-top: 14px;}
}



/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
#fakeloader .fl{width: 64%!important;max-width: 500px;}
.overlay{background-color: rgba(255,255,255,1)!important;}
.button_container.active .top,.button_container.active .bottom{background: #ff9b31;}
.overlay ul li a{color: #333;}
.overlay .sns_links{height: auto;}
.overlay .sns_links li{animation: none;list-style: none;}
.overlay .sns_links img{height: auto!important;}
.sns.pc_hide{
	position: fixed;
    top: 10px;
    right: 66px;
    z-index: 94;
}
.sns.pc_hide p {display: inline-block;}
.overlay ul li{padding-bottom: 30px;font-size: 25px;}

.cate_list li{width: 44%;}
#intro_txt h2,#top_cms .font_20_tb{font-size: 26px;}
.font_2dw_tb{font-size: 18px;}
.font_2up_tb{font-size: -webkit-calc(1rem + 4px);font-size: calc(1rem + 4px);}
	
#menu_bt li {width: 100%!important;}
#menu_bt li+li {
    margin-left: 0;
    margin-top: 30px;
}
.calendar_btn{margin-top: -6px;}

/* Googleカレンダー */
#calendar{width: 80%;margin-bottom: 50px;padding-top: 50px;}
#calendar iframe,.calendar_cms iframe{width: 100%;}

/* YouTube */
.yt{width: 100%;}

/* header24 */
#wrap{padding-top: 0!important;}
.sns.h_sns{top: 25px;}
header.height80vh_sp,#video {height: 549px;}
header .scroll_d{display: none;}
#pc_nav{top: 209px;}
#header{height: 100px}
header .menu_stick{top: 40px;right: 40px;}
#header h1 img {width: 53%!important;max-width: 392px;}
#page_title {margin-top: 104px;}
	
/* 改行不備 */
#contents .effect_t-container.animsp{padding: 25px;}
.sub_cate_txt1{padding: 0 4%;}
.box_txt1{padding: 0px 10px!important;}
.cate_list{padding: 0 10px;letter-spacing: 0;}
}



/* ---------- スマホ ---------- */
@media screen and (max-width: 667px){
#fakeloader .fl{width: 73%!important;max-width: 500px;}
#header #header_wrap{padding: 15px 9px;}
#header .logo img {max-width: 56%;}
.button_container{right: 15px;}

.overlay .sns_links img{height: 100%!important;}
.overlay ul li{padding-bottom: 12px;font-size: 17px;}
	
#header{z-index: 89;}
#intro_txt h2, #top_cms .font_20_tb,#contents .box_wrap .box:nth-child(odd) .contents_title h3, #contents .box_wrap .box:nth-child(even) .contents_title h3, .bg_color4 h2.stripe .effect_t-item.active, #top_cms_box .font_24, #bottom_info_item .font_24 {font-size: 23px;}
.font_14,.font_14_sp {font-size: 17px;}
.font_16_sp{font-size: 18px}
#menu_bt .font_20{font-size: 22px;}
#page_title .font_24{font-size: 24px;}
#info_txt{font-size: 15px;}
.font_100per {font-size: 16px;}
.cate_list li{width: 100%;}


/* Googleカレンダー */
#calendar{width: 91%;margin-bottom: 15px;padding-top: 5px;}
#calendar iframe,.calendar_cms iframe{height: 378px;}

/* scrollanim */
#intro h2,#intro p {opacity: 0;transform: translateY(50px);transition: all 2s 1s ease;}
#intro p {transition: all 2s 2s ease;}
#intro.animStart h2,#intro.animStart p {opacity: 1;transform: translate(0,0px);}
	
.effect_t-container,#contents .effect_t-container.animsp{opacity: 0; transform: translateY(50px);transition: all 2s 1s ease;}
#contents .effect_t-container.animsp{opacity: 0; transform: translateY(50px);transition: all 2s 1.5s ease;}
#contents .effect_t-container.animsp.active {opacity: 1;transform: translate(0,0px);}

#contents p.effect_t-item.txt_left{transition: transform 2s 1.8s ease,opacity 2s 1.8s ease;}
#menu_bt .effect_t-item:nth-of-type(2){transition: transform 2s .7s ease,opacity 2s .7s ease;}
#menu_bt .effect_t-item:nth-of-type(3){transition: transform 2s .9s ease,opacity 2s .9s ease;}

/* YouTube */
.video_cms,#cms_3-e .video_cms,#cms_2-c .video_cms, #cms_2-d .cate_box .video_cms {width: 100%!important;padding-bottom: 59.25%;}
	
/* header24 */
.sns.h_sns{top: 13px;right: 81px;}
.sns.h_sns a{width: 40px;height: 40px;}
.sns.h_sns a i{width: 20px;height: 20px;}
.sns.h_sns a img{width: 26px;height: 26px;}
header.height80vh_sp {height: 100%;}
#header {height: 63px;padding-left: 8px;margin-bottom: 64px}
header .menu_stick {top: 24px;right: 19px;}
#header h1 img{width: 49%!important;transform: translateY(-11px);}
#video{height: 33vh;margin-top: 67px;}
#page_title {margin-top: 67px;}

.sns_links li {width: 10.33333%!important;}
.calendar_btn{width: 66%;margin-bottom: 39px;}
#calendar .c_bnr{width: 100%;}
#calendar .bnr{width: 75%!important;}

/* 改行不備 */
#contents .effect_t-container.animsp{padding: 10px;}
.sub_cate_txt1{padding: 0 5px;}


/* バナーCMS */
.cate_btn_container a {
    padding: 8px 10px;
    letter-spacing: 1px;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}
.cate_btn_container{
    margin-top: -3px;
    padding: 0;
}
}



/*----------------------------------------------
			2022.02.04 修正
----------------------------------------------*/
#cms_3-e .sub_cate_txt1 {
    padding-bottom: 0px;
}



