@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&family=Noto+Sans+JP:wght@700&display=swap');
/*@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@1,700&family=Noto+Sans+JP:wght@700&display=swap');*/

/* CSS Document */

/***　全ページ　***/

body, .font_sans-serif{
	font-family: 'Noto Sans JP', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif
}
.font_mon, #page04 .box_item::before, .cate::before{
	font-family: 'Montserrat', 'Noto Sans JP', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif
}

*:focus {outline:none;}
html{font-size:100%;}
body{-webkit-text-size-adjust: 100%;}

input[type="submit"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
  outline-offset: -2px;
}

#page-top a{
	width: 50px;
	height: 50px;
	border-radius: 50%;
}
#page-top a:hover{
	-webkit-transform: translateY(-5px);
	-ms-transform: translateY(-5px);
	transform: translateY(-5px);
}
textarea{overflow: auto}
.linkStyle{
	word-break: break-all;
}

.shadow_h{
	box-shadow: 0 5px 0 currentColor
}
.hvr_trans:hover{
	box-shadow: 0 0 0 currentColor;
	transform: translateY(5px)
}
.border_title{
	text-shadow: 
		2px  2px 0 #141414,
		-2px  2px 0 #141414,
		2px -2px 0 #141414,
		-2px -2px 0 #141414,
		2px  0px 0 #141414,
		0px  2px 0 #141414,
		-2px  0px 0 #141414,
		0px -2px 0 #141414,
		0 7px 0 #141414,
		-2px 7px 0 #141414,
		2px 7px 0 #141414
}
.border_title_b{
	text-shadow: 
		2px  2px 0 #1b80ef,
		-2px  2px 0 #1b80ef,
		2px -2px 0 #1b80ef,
		-2px -2px 0 #1b80ef,
		2px  0px 0 #1b80ef,
		0px  2px 0 #1b80ef,
		-2px  0px 0 #1b80ef,
		0px -2px 0 #1b80ef,
		0 7px 0 #1b80ef,
		-2px 7px 0 #1b80ef,
		2px 7px 0 #1b80ef
}

.cate:last-child, .cate_box:last-child{
	margin-bottom: 0
}
.cate:nth-child(odd){
	background-color: #f7f7f7
}

#loader{
	z-index: 7
}
#loader .count{
	font-size: 70px
}

/***　ヘッダー　***/

#left_wrap{
	top: 0;
	left: 0;
	background-image: linear-gradient(to right, rgba(255,255,255,0.1) 50%, transparent 50%);
	background-size: 22.3%;
	z-index: 3
}
#left_wrap .star_wrap img{
	z-index: -1;
	top: -50px;
}
#left_wrap .star_wrap .star1{
	left: 10%;
	animation: star 20s linear -1s infinite, anime1 5s linear -7s infinite
}
#left_wrap .star_wrap .star2{
	left: 80%;
	animation: star 20s linear -4s infinite, anime1 7s linear -2s infinite
}
#left_wrap .star_wrap .star3{
	left: 30%;
	animation: star 20s linear -14s infinite, anime1 9s linear -1s infinite
}
#left_wrap .star_wrap .star4{
	left: 60%;
	animation: star 20s linear -10s infinite, anime1 6s linear -5s infinite
}
#left_wrap .star_wrap .star5{
	left: 20%;
	animation: star 20s linear -7s infinite, anime1 10s linear -6s infinite
}
#left_wrap .star_wrap .star6{
	left: 50%;
	animation: star 20s linear -18s infinite, anime1 8s linear -3s infinite
}
@keyframes anime1{
	0%{transform: rotate(0)}
	100%{transform: rotate(-360deg)}
}
@keyframes star{
	0%{top: -50px}
	100%{top: 120%}
}
@keyframes star2{
	0%{top: -50px}
	100%{top: calc(100% + 50px)}
}

#pc_nav li a{
	border-radius: 50px
}
#sp_nav{
	top: 0;
	left: 0;
	overflow-y: auto
}

#sp_nav_bt{
	top: 0;
	bottom: 0;
	right: 10px;
	margin: auto;
	width: 50px;
	height: 50px;
	z-index: 1
}
#sp_nav_bt span{
	width: 25px;
	height: 2px;
	background-color: #fff;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	transition: 0.3s
}
#sp_nav_bt span.bar_t{
	top: -15px
}
#sp_nav_bt span.bar_b{
	bottom: -15px
}
#sp_nav_bt.trans span.bar_m{
	opacity: 0;
	left: 20px
}
#sp_nav_bt.trans span.bar_t{
	transform: rotate(45deg);
	top: 0
}
#sp_nav_bt.trans span.bar_b{
	transform: rotate(-45deg);
	bottom: 0
}
#sp_nav li a{
	border-radius: 50px
}

.sns_link a{
	padding: 9px
}

/***　フッター　***/

footer #page_top{
	left: 0;
	right: 0;
	margin: auto;
	top: -75px;
	cursor: pointer;
	transition: 0.3s;
	transition-property: bottom;
	z-index: 2
}
footer #page_top.active{
	position: fixed;
	left: calc(50% + 75px);
	top: auto!important;
	bottom: 0!important;
	margin: 0
}
footer #page_top.scroll{
	bottom: -80px!important;
}
#footer .footer_right{
	width: calc(100% - 300px)
}
#footer .footer_tel a{
	border-radius: 50px
}

#footer{
    padding-bottom: 140px;
}
.foot_banner{
    right: 0;
    bottom: 10px;
}
.foot_banner a{
    border-right: none;
    border-radius: 50px 0 0 50px;
}

/***　index　***/

.fade_txt span{
	display: inline-block;
	opacity: 0;
	transition: 0.3s;
	transition-timing-function: cubic-bezier(.175,.885,.32,1.275);
	transition-property: opacity, transform;
	transform: scale(0.5)
}
#pc_nav li{
	opacity: 0;
	transition: 0.3s;
	transition-timing-function: cubic-bezier(.175,.885,.32,1.275);
	transition-property: opacity, transform;
	transform: scale(0.5)
}
.fade_txt span.active, #pc_nav li.active{
	opacity: 1;
	transform: scale(1)
}

.fadein .fade_box{
	opacity: 0;
	transition: 0.3s;
	transition-timing-function: cubic-bezier(.175,.885,.32,1.275);
	transition-property: opacity, transform;
	transform: translateY(20px)
}
.fadein .fade_box.active{
	opacity: 1;
	transform: translateY(0)
}

#right_wrap, #main_img{
	width: calc(100% - 300px);
	margin-left: 300px;
	box-sizing: border-box
}

#main_img{
	margin-left: 0;
	right: 0;
	top: 0;
	z-index: -1
}

#catch .catch_main{
	height: 100vh
}
#catch.active{
	background-color: rgba(0,0,0,0.2)
}

#intro .intro_txt::before, #intro .intro_txt::after{
	position: absolute;
	content: "";
	width: 100px;
	height: 50px;
}
#intro .intro_txt::before{
	top: 0;
	left: 0;
	border-top: solid 2px currentColor;
	border-left: solid 2px currentColor
}
#intro .intro_txt::after{
	bottom: 0;
	right: 0;
	border-bottom: solid 2px currentColor;
	border-right: solid 2px currentColor
}

.more a{
	border-radius: 50px
}
#top_news .news_title{
	align-content: space-around
}

#top_contents .con_img{
	margin-top: -100px
}

#top_cms .top_cms_wrap{
	border-radius: 20px
}
#top_cms .top_faq .con_no{
	left: 15px;
	top: 15px
}
#top_cms .top_faq .cate_box h3, #top_cms .top_faq .cate_box p{
	border-radius: 20px;
	min-height: 1.5em
}
#top_cms .top_faq .box_q{
	background-image: url(../img/icon_q.png);
	background-repeat: no-repeat;
	background-position: top 5px left;
	background-size: 60px
}
#top_cms .top_faq .box_a{
	background-image: url(../img/icon_a.png);
	background-repeat: no-repeat;
	background-position: top 5px right;
	background-size: 60px
}
#top_cms .top_faq .box_q, #top_cms .top_faq .box_a{
	padding: 0 90px
}
#top_cms .top_faq .box_q h3::before{
	position: absolute;
	content: "";
	width: 20px;
	height: 20px;
	left: -20px;
	top: 21px;
	background-image: url("../img/icon_q_f.png");
	background-size: contain
}
#top_cms .top_faq .box_a p::before{
	position: absolute;
	content: "";
	width: 20px;
	height: 20px;
	right: -20px;
	top: 21px;
	background-image: url("../img/icon_a_f.png");
	background-size: contain
}

#top_gallery .cms_title{
	left: 50%;
	top: -20px;
	transform: translateX(-50%);
	z-index: 1
}

#top_contact a{
	background-color: rgba(20,20,20,0.4)
}
#top_contact a:hover{
	background-color: rgba(20,20,20,0.6);
	transform: scale(1.1)
}

/***　page_title cate_list cate_title pager　***/

#page_title .page_title_img{
	height: 300px
}
#page_title p{
	margin-top: -30px
}

#pager li{
	padding: 0 5px;
	box-sizing: border-box;
}
#pager li:last-child{
	border: none
}
#pager li a{
	display: block;
	width: 60px;
	height: 60px;
	line-height: 60px;
	transition: 0.3s;
	position: relative;
	color: #141414;
	background-color: #f9b723;
	border: solid 2px;
	border-radius: 50%;
	box-shadow: 0 5px 0 #141414
}
#pager li.prev a, #pager li.next a{
	color: #1a1a1a;
	background-color: transparent
}
#pager li a:hover, #pager li.page-selection a{
	background-color: #1b80ef;
	box-shadow: 0 0 0 currentColor;
	transform: translateY(5px)
}
#pager li.prev a::before,#pager li.next a::before{
	position: absolute;
	content: "";
	display: block;
	width: 10px;
	height: 10px;
	border-top: solid 2px;
	border-right: solid 2px;
	top: 0;
	left: 0;
	bottom: 0;
	right: 5px;
	margin: auto;
	transform: rotate(45deg);
}
#pager li.prev a::before{
	right: 0;
	left: 5px;
	transform: rotate(-135deg);
}

#cate_list li{
	max-width: 100%;
	box-sizing: border-box
}
#cate_list li a{
	border-radius: 50px
}

.cate_title{
	background-image: url("../img/title_bg.png");
	background-size: 150px;
	background-repeat: no-repeat;
	background-position: bottom center;
	padding-bottom: 25px
}

.cate_wrap{
	counter-reset: number2 0;
}
.cate::before{
	counter-increment: number2 1;
	content: "0" counter(number2);
	font-size: 20px;
	color: #1b80ef;
	border-bottom: solid 2px;
	display: block;
	width: 50px;
	margin: -20px auto 20px;
	line-height: 1.5;
	text-align: center
}

img.border_so2{
	box-sizing: border-box
}

/***　page02　***/

#page02 .box_item, #page02 .close{
	cursor: pointer
}
#page02 .close{
	top: 15px;
	right: 15px
}
#page02 .open{
	top: 0;
	left: 0;
	background-color: rgba(27,128,239,0.8);
	overflow-y: auto;
	z-index: 5;
}
#page02 .open_box{
	border-radius: 20px
}

/***　page04　***/

#page04 .cate{
	counter-reset: number 0;
}
#page04 .cate_txt1{
	margin-top: -20px
}
#page04 .cate_box:nth-child(even){
	flex-direction: row-reverse;
}
#page04 .box_item::before{
	counter-increment: number 1;
	content: "0" counter(number);
	font-size: 24px;
	color: #f9b723;
	display: block;
	margin-bottom: 10px;
	line-height: 1.5
}
#page04 .box_title1::before{
	position: absolute;
	content: "";
	width: 30px;
	height: 2px;
	left: 0;
	bottom: 0;
	background-color: #f9b723
}

/***　page05　***/

#page05 .box_item, #page05 .close{
	cursor: pointer
}
#page05 .close{
	top: 15px;
	right: 15px
}
#page05 .open{
	top: 0;
	left: 0;
	background-color: rgba(27,128,239,0.8);
	overflow-y: auto;
	z-index: 5;
}
#page05 .open_box{
	border-radius: 20px
}

/***　page06　***/

#page06 .con_no{
	left: 15px;
	top: 15px
}
#page06 .cate_box h3, #page06 .cate_box p{
	border-radius: 20px;
	min-height: 1.5em
}
#page06 .box_q{
	background-image: url(../img/icon_q.png);
	background-repeat: no-repeat;
	background-position: top 5px left;
	background-size: 60px
}
#page06 .box_a{
	background-image: url(../img/icon_a.png);
	background-repeat: no-repeat;
	background-position: top 5px right;
	background-size: 60px
}
#page06 .box_q, #page06 .box_a{
	padding: 0 90px
}
#page06 .box_q h3::before{
	position: absolute;
	content: "";
	width: 20px;
	height: 20px;
	left: -20px;
	top: 21px;
	background-image: url("../img/icon_q_f.png");
	background-size: contain
}
#page06 .box_a p::before{
	position: absolute;
	content: "";
	width: 20px;
	height: 20px;
	right: -20px;
	top: 21px;
	background-image: url("../img/icon_a_f.png");
	background-size: contain
}

/***　page08　***/

#page08 .banner_box a{
	border-radius: 50px
}

/***　page10　***/

#page10 a{
	border-radius: 100px
}

/***　IE対処　***/

@media all and (-ms-high-contrast:none) {
	#cate_list li a{
		padding-top: 9px;
		padding-bottom: 11px
	}
}

.float_right{
	float: right
}
.float_left{
	float: left
}
.float_clear{
	float: none
}
.clearfix::after{
	clear:both;
	content:".";
	visibility:hidden;
	display:block;
	height:0;
}
/*ここからタブレット用（780px以下）環境の設定
---------------------------------------------------------------------------*/
/*表示を切り替えるウィンドウサイズの指定*/
@media screen and (max-width: 768px){
	
.hvr_trans:hover{
	transform: none
}
	
#logo{
	transition: 0.5s;
	transition-property: max-width
}
#logo.trans{
	max-width: 170px
}
	
#left_wrap .star_wrap .star1{
	animation: star2 5s linear -1s infinite, anime1 5s linear -7s infinite
}
#left_wrap .star_wrap .star2{
	animation: star2 5s linear -5s infinite, anime1 7s linear -2s infinite
}
#left_wrap .star_wrap .star3{
	animation: star2 5s linear -9s infinite, anime1 9s linear -1s infinite
}
#left_wrap .star_wrap .star6{
	animation: star2 5s linear -2s infinite, anime1 8s linear -3s infinite
}
	
#left_wrap{
	height: auto
}
#right_wrap, #main_img{
	width: 100%;
	margin-left: 0;
	box-sizing: border-box
}
#top_contents .con_no{
	margin-top: -30px
}
#top_contents .con_img{
	background-image: none!important
}
#pager li:not(.prev):not(.next){
	display: none;
}
#pager li a{
	background-color: #f9b723!important
}
#pager li a:hover{
	transform: none;
	box-shadow: 0 5px 0 #141414
}
footer #page_top.active{
	left: 0;
	right: 0;
	margin: auto
}
footer #page_top{
	width: 120px;
	top: -60px;
}

.float_right_tb{
	float: right
}
.float_left_tb{
	float: left
}
.float_clear_tb{
	float: none
}
.clearfix_tb::after{
	clear:both;
	content:".";
	visibility:hidden;
	display:block;
	height:0;
}
}

/*ここからスマホ用（750px以下）環境の設定
---------------------------------------------------------------------------*/
/*表示を切り替えるウィンドウサイズの指定*/
@media screen and (max-width: 667px){
body, html{
	font-size: 14px
}
#logo.trans{
	max-width: 120px
}
#top_contents .con_no{
	margin-top: -20px
}
#top_cms .top_faq .box_q, #page06 .box_q{
	padding-right: 0
}
#top_cms .top_faq .box_a, #page06 .box_a{
	padding-left: 0
}
#top_cms .top_faq .con_no, #page06 .con_no{
    top: 13px;
}
#page_title .page_title_img{
	height: 200px
}
#page_title p{
	margin-top: -20px
}

.float_right_sp{
	float: right
}
.float_left_sp{
	float: left
}
.float_clear_sp{
	float: none
}
.clearfix_sp::after{
	clear:both;
	content:".";
	visibility:hidden;
	display:block;
	height:0;
}
#footer{
    padding-bottom: 50px;
}
}