@charset "utf-8";
/* CSS Document */

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

*:focus {outline:none;}
html, body{font-size: 14px}
body, .font_sans-serif{
	-webkit-text-size-adjust: 100%;
	font-family: 'Noto Sans JP', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;
}
.font_ropa{font-family: 'Ropa Sans', 'Noto Sans JP', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;}


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;
}

#loader{
	top: 0;
	left: 0;
	z-index: 5
}
#loader .gauge{
	left: 0;
	bottom: 5px;
	top: calc(100% - 5px);
}

.linkStyle{transition: 0.5s;color: #ed7c5d}
.linkStyle:hover{opacity: 0.7}

.hvr_trans:hover{transform: translateY(-5px)}

textarea{overflow: auto}

#sp_nav::before, header::before, header::after, #main_nav a::before, .more a::before, #top_contents::before, #intro .more::before, #top_contents .con_box::before, #top_cms .cms_title::before, #top_info .sns_box::before, #cms_box .cms_cate_list a::before, #cms_box .cms_cate_list a::after, #cms_box .cms_box_title span::before, .cate_title::before, #page06 .box_item::before, #page06 .box_item::after,  #page02 #cate_list .cate_list::before{
	content: "";
	position: absolute;
	pointer-events: none
}

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

header{
	top: 0;
	left: 0
}
header::before, header::after{
	width: 500px;
	height: 500px;
	border-radius: 50%;
	top: -100px;
	left: -100px;
	background-color: #f6bc0c
}
header::after{
	width: 600px;
	height: 600px;
	top: auto;
	left: auto;
	right: -100px;
	bottom: -300px;
}
#header{
	top: -100px;
	right: 0;
	border-radius: 0 0 0 50px;
	z-index: 2;
	box-shadow: 0 0 20px rgba(0,0,0,0.06)
}
.under_page header::before, .under_page header::after{display: none}
#logo{
	top: 2%;
	left: 2%;
	width: 250px
}
@media screen and (max-height: 850px){
	#logo{width: 150px}
}
.under_page #logo{width: 100px}

#sp_nav{
	right: 0;
	left: 0;
	top: 0;
	margin: auto
}
#sp_nav::before{
	width: 160px;
	height: 160px;
	border-radius: 50%;
	left: 50%;
	transform: translateX(-50%);
	top: -60px;
	background-color: #f6bc0c;
	pointer-events: auto;
	transition: 0.8s;
	transition-timing-function: cubic-bezier(.68,.01,.2,1)
}
#sp_nav.trans::before{
	height: calc(100vh + 360px);
	width: 100vh;
	top: -300px;
	border-radius: 0
}
.menu_stick{
	width: 50px;
	height: 50px;
	z-index: 3;
	box-sizing: border-box
}
.menu_stick span{
	height: 2px;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	transition: 0.5s;
	background-color: currentColor
}
.menu_stick span:first-of-type{top: 14px}
.menu_stick span:last-of-type{bottom: 14px}
.menu_stick.stick_trans span:first-of-type, .menu_stick.stick_trans span:last-of-type{
	top: 0;
	bottom: 0;
	margin: auto;
}
.menu_stick.stick_trans span:not(:first-of-type):not(:last-of-type){background-color: transparent}
.menu_stick.stick_trans span:first-of-type{transform: rotate(225deg);background-color: #fff}
.menu_stick.stick_trans span:last-of-type{transform: rotate(-225deg);background-color: #fff}

header .left_box, header .right_box{height: 70%}
#main_img .slider{border-radius: 50px 0 0 50px}
#main_img .main_txt{
	top: calc(50% - 25px);
	transform: translateY(-50%);
	right: 8%;
	z-index: 1;
	background-color: rgba(255,255,255,0.6);
	border-radius: 20px
}
#main_nav ul{
	border-radius: 0 50px 50px 0;
	padding-top: 70px;
	padding-bottom: 70px
}
#main_nav a::before{
	width: 20px;
	height: 5px;
	border-radius: 20px;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	transition: 0.3s;
	background-color: #f6bc0c
}
#main_nav a:hover::before{
	height: 16px;
	width: 16px;
	left: 2px
}
#main_nav a:hover{padding-left: 35px}

header .scroll_dw{
	right: 50px;
	bottom: 5%;
	z-index: 1;
	cursor: pointer
}
header .scroll_dw span{
	width: 10px;
	height: 10px;
	transform: rotate(45deg)
}

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

#top_info .info_wrap{
	border-radius: 50px 50px 0 0;
	background-image: url(../img/info_bg.png);
	background-size: 630px;
	background-repeat: no-repeat;
	background-position: top center;
}
#top_info .sns_box{border-radius: 50px}
#top_info .map_bt a{
	border-radius: 0 0 20px 20px;
	transform: rotate(90deg);
	top: 0;
	bottom: 0;
	height: 50px;
	line-height: 50px;
	margin: auto;
	right: -75px
}

#top_info .scroll_top{
	left: 0;
	right: 0;
	margin: auto;
	width: 120px;
	height: 60px;
	border-radius: 100px 100px 0 0;
	cursor: pointer;
	box-sizing: border-box
}
#top_info .scroll_top span{
	width: 10px;
	height: 10px;
	transform: rotate(45deg)
}

/***　index　***/

.fadein.right_box .fadeinbox, .fadein.con2 .fadeinbox{
	opacity: 0;
	position: relative;
	right: -20px
}
.fadein.con1 .fadeinbox, .fadein.con3 .fadeinbox{
	opacity: 0;
	position: relative;
	left: -20px
}

.more a::before, #top_info .sns_box::before{
	width: 20px;
	height: 20px;
	border-radius: 50%;
	top: 0;
	bottom: 0;
	left: 20px;
	margin: auto;
	background-color: #fff;
	transition: 0.3s
}
#top_info .sns_box::before{background-color: #ed7c5d}
.more a:hover::before{
	width: 100%;
	height: 100%;
	border-radius: 50px;
	left: 0;
}
.more a{border-radius: 50px}
.more a:hover span{color: #f6bc0c}

#intro{
	background-image: url(../img/intro_bg.png);
	background-size: 1200px;
	background-repeat: repeat-x;
	background-position: top 70px left 0;
	animation: intro 30s linear infinite
}
@keyframes intro {
	0%		{background-position: top 70px left 0}
	100%	{background-position: top 70px left -1200px}
}

#intro{z-index: 1}
#intro .box_img{
	border-radius: 50px 0 0 50px;
	height: 400px
}
#intro .more::before{
	width: 80px;
	height: 80px;
	top: -33px;
	right: 0;
	left: 320px;
	margin: auto;
	background-image: url(../img/bird.png);
	background-size: contain
}

#top_contents::before{
	width: 100%;
	top: -180px;
	bottom: 0;
	background-color: #f7f7f7;
}
#top_contents .con_box::before{
	width: 400px;
	height: 400px;
	background-color: #fff;
	top: 0;
	bottom: 0;
	margin: auto;
	right: -200px;
	border-radius: 50%
}
#top_contents .con_box.con2::before{
	left: -200px;
	right: auto
}
#top_contents .con_img{
	height: 400px;
	border-radius: 0 50px 50px 0
}
#top_contents .con2 .con_img{border-radius: 50px 0 0 50px}
#top_contents .con_no{font-size: 72px}

#cms_box .cms_box_title span{padding-right: 70px}
#cms_box .cms_box_title span::before{
	width: 60px;
	height: 60px;
	bottom: 0;
	right: 0;
	background-image: url(../img/cms_title.png);
	background-size: contain
}
#cms_box .cms_cate_list{z-index: 0}
#cms_box .cms_cate_list a{border-radius: 50px;padding-right: 90px}
#cms_box .cms_cate_list a.active{
	background-color: #f6bc0c;
	color: #fff;
}
#cms_box .cms_cate_list a::after{
	width: 18px;
	height: 18px;
	background-color: #f6bc0c;
	border-radius: 3px;
	left: 0;
	right: 0;
	bottom: -8px;
	margin: auto;
	transform: rotate(45deg);
	opacity: 0;
	z-index: -1
}
#cms_box .cms_cate_list a.active::after{opacity: 1}
#cms_box .cms_cate_list a .cate_img1{
	width: 70px;
	right: 10px;
	bottom: 0;
}
#cms_box .cate_wrap{border-radius: 50px;margin-top: -45px}
#cms_box .box_img1{border-radius: 20px}

#top_cms .cms_title::before{
	width: 200px;
	height: 200px;
	border-radius: 50%;
	left: 0;
	right: 0;
	margin: auto;
	bottom: -100px;
	background-color: #f7f7f7
}
#top_items .cate_box{
	margin-bottom: 0;
	padding: 10px;
}
#top_items .cate_box .box_img1{
	border-radius: 20px;
	margin-bottom: 0;
}
#top_items .cate_box .box_item{
	display: none
}

#top_cms .facebook, #top_cms .blog, #top_cms .insta{height: 120px}
#top_cms .facebook a{background-color: #3b5998}
#top_cms .blog a{background-color: #2d8c3c}
#top_cms .facebook a, #top_cms .insta a, #top_cms .blog a{border-radius: 20px}
#top_cms .sns_wrap{
	border-radius: 20px;
	height: 570px;
}

/***　page_title cate_list cate_title　***/

#page_title h2{font-size: 50px}
#page_title{
	background-image: url(../img/page_title.png);
	background-size: 100% 100px;
	background-position: center bottom;
	background-repeat: no-repeat
}

#cate_list a{border-radius: 50px}

.cate_title::before{
	width: 40px;
	height: 2px;
	left: 0;
	right: 0;
	margin: auto;
	bottom: -2px;
	background-color: #f6bc0c;
}

.under_page .normal_img img, .under_page .square_img, .under_page .rectangle_img{border-radius: 20px}

/***　page02

#page02 #cate_list{border-radius: 20px}
#page02 #cate_list .date{width: 80px}
#page02 #cate_list .list_title{width: calc(100% - 80px)}
#page02 #cate_list .cate_list .cate_list_title{cursor: pointer}
#page02 #cate_list .cate_list:last-child{margin-bottom: 0}
#page02 #cate_list .cate_list::before{
	width: 5px;
	height: 5px;
	border-top: solid 2px #ed7c5d;
	border-right: solid 2px #ed7c5d;
	transform: rotate(45deg);
	top: 10px;
	left: 0;
	transition: 0.3s
}
#page02 #cate_list .cate_list.trans::before{
	transform: rotate(135deg);
	top: 8px;
}
#page02 #cate_list .box_list li a:hover{transform: translateX(5px)}

#page02 figure.over_hide{border-radius: 20px}　***/

#page02 .cate_box .box_item{
	cursor: pointer;
}
#page02 .box_item .box_txt1{
	height: 3em
}
#page02 .date_box::before{
	position: absolute;
	content: "";
	width: 100%;
	height: 1px;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	background-color: #48874A
}
#page02 .date_box span{
	border-radius: 50px
}
#page02 .box_open{
	top: 0;
	left: 0;
	background-color: rgba(116,127,118,0.8);
	z-index: 4;
	overflow-y: auto
}
#page02 .open_box{
	border-radius: 20px
}
#page02 .close{
	top: 10px;
	right: 10px;
	cursor: pointer
}
.pager li{
	margin: 0 10px
}
.pager li a{
	display: block;
	color: #ed7c5d;
	border: solid 1px #ed7c5d;
	transition: 0.3s;
	width: 50px;
	height: 50px;
	line-height: 50px;
	border-radius: 5px
}
.pager li a:hover{
	color: #fff;
	background-color: #ed7c5d
}
.pager li.page-selection a{
	background-color: #ed7c5d;
	color: #fff
}
.pager li.prev a,.pager li.next a{
	border: none
}

/***　page04　***/

#page04 .cate_box, #page04 .box_txt1{border-radius: 20px}

/***　page05　***/

#page05 .sub_cate_img1{margin-top: -50px}
#page05 .sub_cate_item{cursor: pointer}
#page05 .sub_cate_open .sub_cate_img1{margin-top: -100px}
#page05 .sub_cate_open{
	background-color: rgba(230,230,230,0.8);
	top: 0;
	left: 0;
	z-index: 10;
	overflow-y: auto
}
#page05 .sub_cate_open .close{
	top: -60px;
	right: 10px;
	cursor: pointer
}
#page05 .sub_cate_contents{
	border-radius: 20px;
	background-image: url(../img/bird.png);
	background-size: 200px;
	background-position: top 10px right -30px;
	background-repeat: no-repeat
}
#page05 .box_item, #page05 .sub_cate_item{border-radius: 20px}

/***　page06　***/

#page06 .box_item{
	cursor: pointer;
	padding-left: 70px;
	box-sizing: border-box;
	min-height: 74px
}
#page06 .box_item::after{
	width: 10px;
	height: 10px;
	left: 24px;
	top: 33px;
	border-left: solid 2px #fff;
	border-top: solid 2px #fff;
	transform: rotate(45deg);
	transition: 0.3s;
	z-index: 1
}
#page06 .box_item::before{
	width: 40px;
	height: 40px;
	left: 10px;
	top: 17px;
	border-radius: 50%;
	background-color: #ed7c5d
}
#page06 .box_item.trans::after{
	transform: rotate(225deg);
	top: 28px
}

/***　page08　***/

#page08 #submit input{border-radius: 50px}
#page08 #form_box input[type="text"]:focus,#page08 #form_box textarea:focus{
	background-color: #fff;
	border-color: #f6bc0c
}

/***　　***/



/***　IE対処　***/

@media all and (-ms-high-contrast:none) {
}

/* 文字間隔 */
/* default 1px */
.letter_0{letter-spacing: 0;}
.letter_1{letter-spacing: 0.1em;}
.letter_2{letter-spacing: 0.2em;}
.letter_3{letter-spacing: 0.3em;}
.letter_4{letter-spacing: 0.4em;}
.letter_5{letter-spacing: 0.5em;}
.letter_6{letter-spacing: 0.6em;}
.letter_7{letter-spacing: 0.7em;}
.letter_8{letter-spacing: 0.8em;}
.letter_9{letter-spacing: 0.9em;}
.letter_10{letter-spacing: 1em;}

.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){
	
header::before{display: none}
#header{
	background-color: transparent;
	top: 0!important;
	box-shadow: none
}
#main_img{height: calc(100% - 140px)}
#main_img .slider{border-radius: 0}
#main_img .main_txt{
	left: 50%;
	transform: translate(-50%,-50%);
	right: auto
}
#logo, .under_page #logo{
	top: 10px;
	left: 0;
	right: 0;
	margin: auto;
	width: 60px;
	z-index: 3
}
header .scroll_dw{bottom: 30px;}

#intro .box_img{
	width: calc(100% - 20px)!important;
	height: 30vw;
	border-radius: 50px
}
#top_contents::before{top: -130px}
#top_contents .con_box::before{
	top: auto;
	bottom: 0;
}
#top_contents .con2 .con_img{margin-left: auto}
#top_contents .con_img{
	width: calc(100% - 20px)!important;
	height: 30vw
}
#top_contents .con_item{margin-top: -45px}
.hvr_trans:hover{transform: none}
	
#top_info .map_bt a{
	border-radius: 50px;
	transform: none;
}
#top_items .cate_box .box_img1:hover{transform: none}
#top_items .cate_box .box_img1:hover img{transform: translate(-50%,-50%)}
#page_title{background-size: 100% 10vw;}
#page_title h2{font-size: 40px}
/** #page02 #cate_list .box_list li a:hover{transform: none} **/
	
.pager li:not(.prev):not(.next){
	display: none;
}
.pager li.prev a,.pager li.next a{
	background-color: #ed7c5d;
	color: #fff
}

/* 文字間隔 */
/* default 1px */
.letter_0_tb{letter-spacing: 0;}
.letter_1_tb{letter-spacing: 0.1em;}
.letter_2_tb{letter-spacing: 0.2em;}
.letter_3_tb{letter-spacing: 0.3em;}
.letter_4_tb{letter-spacing: 0.4em;}
.letter_5_tb{letter-spacing: 0.5em;}
.letter_6_tb{letter-spacing: 0.6em;}
.letter_7_tb{letter-spacing: 0.7em;}
.letter_8_tb{letter-spacing: 0.8em;}
.letter_9_tb{letter-spacing: 0.9em;}
.letter_10_tb{letter-spacing: 1em;}

.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){
header::after{
	width: 300px;
	height: 300px;
	right: 0;
	left: 0;
	margin: auto;
	bottom: -150px;
}
header .scroll_dw{
	right: 0;
	left: 0;
	margin: auto
}
#intro .box_img{
	height: 50vw;
}
#intro .more::before{left: 270px}
#top_contents .con_img{height: 50vw}
#top_contents .con_box::before{
	width: 300px;
	height: 300px;
	right: -150px;
	top: 100px;
	bottom: auto
}
#top_contents .con_box.con2::before{
	right: auto;
	left: -150px
}
#cms_box #cms_news .cate_box, #cms_box #cms_item .cate_box, #cms_box #cms_gallery .cate_box{
	width: 50%!important;
	margin-bottom: 20px
}
#cms_box .cate_wrap{margin-top: 20px;border-radius: 40px}
#top_info .info_wrap{background-size: 300px;}
#top_info .sns_box{border-radius: 20px}
#top_info .sns_box::before{display: none}
#page05 .sub_cate_contents{
	background-size: 150px;
	background-position: top 140px right -30px;}
#page07 .info_box h3{color: #ed7c5d}

/* 文字間隔 */
/* default 1px */
.letter_0_sp{letter-spacing: 0;}
.letter_1_sp{letter-spacing: 0.1em;}
.letter_2_sp{letter-spacing: 0.2em;}
.letter_3_sp{letter-spacing: 0.3em;}
.letter_4_sp{letter-spacing: 0.4em;}
.letter_5_sp{letter-spacing: 0.5em;}
.letter_6_sp{letter-spacing: 0.6em;}
.letter_7_sp{letter-spacing: 0.7em;}
.letter_8_sp{letter-spacing: 0.8em;}
.letter_9_sp{letter-spacing: 0.9em;}
.letter_10_sp{letter-spacing: 1em;}

.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;
}
}