﻿/* all page */
/* color */
.txt_color_nomal{color: #212121;}
.txt_white{color: #212121;}
.txt_color1{color: #000;} /* メインカラー */
.txt_color2{color: #9e8758;} /* サブカラー */
.txt_color3{color: #9e8758;} /* アクセントカラー1 */
.txt_color4{color: #cedff1} /* アクセントカラー2 */

/* background-color */
.bg_color1{background-color: #fff;} /* メインカラー */
.bg_color2{background-color: #a3a7b5} /* サブカラー */
.bg_color3{background-color: #b3b3b3;} /* アクセントカラー1 */
.bg_color4{background-color: #cedff1} /* アクセントカラー2 */

/* border-color ※!important */
.border_color1{border-color: #ccc;}
.border_color2{border-color: #ccc;}
.border_color3{border-color: #ccc;}
.border_color4{border-color: #9e8758;}

.linkStyle{
    color: #333;
    text-decoration: underline;
}
#wrap {
	overflow: hidden;
}

/*フォント*/
.catch .catch2, #aisatsu .aisatsu_txt h2, .contents_box h2, #top_cms .cms_title h2, .top_cms .top_cms_box .cms_title p, .box_title1 {
    font-family: "Noto Sans JP","游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic,"ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic",  sans-serif;
}

.banner a{
	position: relative;
	overflow: hidden;
	text-align: left;
	border: 1px solid #000;
	color: #fff;
}
.banner a:hover{
	background-color: #fff;
	color: #000;
}
.banner a::before{
	content: "";
	background-color: #fff;
	width: 50px;
	height: 1px;
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	-webkit-transition: all 0.3s linear 0s;
    -ms-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
}
.banner a:hover::before{
	background-color: #000;
	transform: translateX(50%);
}

/* top ----------------*/
/*アニメーション*/
.ani_fadein{
	display: none;
}

.marker-animation {
    background-image: -webkit-linear-gradient(left, transparent 50%, rgba(158,135,88,0.6) 50%);
    background-image: -moz-linear-gradient(left, transparent 50%, rgba(158,135,88,0.6) 50%);
    background-image: -ms-linear-gradient(left, transparent 50%, rgba(158,135,88,0.6) 50%);    background-image: -o-linear-gradient(left, transparent 50%, rgba(158,135,88,0.6) 50%);
    background-image: linear-gradient(left, transparent 50%, rgba(158,135,88,0.6) 50%);
    background-repeat: repeat-x;
    background-size: 200% .8em;
    background-position: 0 .8em;
    transition: background 2s ease;
	display: inline;
}
.marker-animation.active{
    background-position: -100% .8em;
}

.animate {
  opacity: 0;
  transform: translateY(10px);
  transition: all 2s;
}
.animate.show {
  opacity: 1;
  transform: translateY(0);
}
.animate.show:nth-of-type(1) {
  transition-delay: 0s;
}
.animate.show:nth-of-type(2) {
  transition-delay: 0.1s;
}
.animate.show:nth-of-type(3) {
  transition-delay: 0.2s;
}
.animate.show:nth-of-type(4) {
  transition-delay: 0.3s;
}
.animate.show:nth-of-type(5) {
  transition-delay: 0.4s;
}
.animate.show:nth-of-type(6) {
  transition-delay: 0.5s;
}

/* header */
.header{
	margin-bottom: 30px;
}
#main_menu {
    background-color: #000;
}
#main_menu ul li a  {
	color: #fff;
}
#main_menu.fixed {
    background-color: #000 !important;
    border-bottom: 1px solid #9e8758;
}

/* main img */
#main_img{
    position: relative;
}
.catch {
    width: 80%;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 10;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 0;
    padding-top: 3%;
    padding-bottom: 2%;
	text-align: center;
	background-color: rgba(255,255,255,0.6);
}
.catch .catch1 {
	font-size: 50px;
	font-family: 'Libre Baskerville', serif;
	font-weight: bold;
}
.catch .catch2 {
	font-size: 16px;
}

/* main */

/* intro */
#aisatsu{
	background-image: none !important;
}
#aisatsu .aisatsu_txt {
    background-color: transparent;
	padding-top: 50px;
	text-align: left;
	padding-bottom: 70px;
}
#aisatsu .aisatsu_txt h2 {
	font-weight: bold;
    padding-left: 10px;
}
#aisatsu .intro_point{
	background: none;
	justify-content: space-between;
	margin-bottom: 150px;
}

/* contents */
#top_contents{
	position: relative;
}
#top_contents::before{
	content: "";
	background-image: url("./Dup/img/texture.jpg");
	background-position: top left;
	background-repeat: repeat-y;
	background-size: 100%;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 100px;
	left: 0;
}
#top_contents::after{
	content: "";
	background-color: rgba(0,0,0,0.60);
	width: 100%;
	height: 100%;
	position: absolute;
	top: 100px;
	left: 0;
}
#contents1 .contents_box, #contents2 .contents_box, #contents3 .contents_box {
	background: none;
	background-color: #fff;
}
.contents_box::before {
    display: none;
}
.contents_box2::before {
    display: none;
}
.contents_box2::after {
    display: none;
}
#contents2, #contents3{
	position: relative;
	z-index: 1;
}
.contents_box::after {
	font-family: 'Libre Baskerville', serif;
	font-weight: bold;
	left: auto;
    top: auto;
    bottom: -20px;
    right: 0;
    background: none;
    width: auto;
    height: auto;
    color: rgba(158,135,88,0.25);
    font-size: 70px;
}
#contents1 .contents_box::after {
    content: "POINT1";
}
#contents2 .contents_box::after {
    content: "POINT2";
}
#contents3 .contents_box::after {
    content: "POINT3";
}
.contents_box h2{
	font-weight: bold;
}

/* topcms */
#top_cms{
	margin-top: 200px;
}
#top_cms .cms_title h2::before{
    background-color: rgba(0,0,0,0.7);
}
#top_cms .cms_title h2::after{
    background-color: rgba(0,0,0,0.7);
}
#top_cms .cms_5-a .box_wrap{
    border: none;
}
#top_cms .cms_5-a h4, #top_cms .cms_5-a p{
    text-align: left;
}

/* footer */
#f_menu ul li a {
    color: #4e4e4e;
    letter-spacing: 1px;
}

/* 追従メニュー */
.sp_menu{
	transition: .3s;
	z-index: 3;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	font-size: 12px;
	letter-spacing: 0px;
}
.sp_menu li{
	width: 25%;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
	border-right: 1px solid #fff;
	box-sizing: border-box;
}
.sp_menu li:nth-of-type(1),.sp_menu li:nth-of-type(5){border-left: 1px solid #fff;}
.sp_menu li:nth-of-type(5),.sp_menu li:nth-of-type(6){border-top: none;}
.sp_menu li a{
	padding: 10px 3px;
	height: 100%;
	box-sizing: border-box;
	color: #fff;
}

.sp_menu_btn{
	width: auto;
	padding: 10px 12px;
	position: absolute;
	top: -41px;
	cursor: pointer;
	border: 1px solid #000;
}

.sp_menu_btn .nav_btn{
	display: inline-block;
	width: 15px;
	height: 15px;
	margin-right: 5px;
	position: relative;
	top: 3px;
}
.sp_menu_btn .nav_btn span{
	display: block;
	background-color: #000;
	height: 3px;
	width: 15px;
	position: absolute;
	left: 5px;
	top: 5px;
	transition: .3s;
}
.sp_menu_btn .nav_btn.open_btn span:nth-child(1){
	transform: rotate(-55deg);
	left: -1px;
	width: 13px;
}
.sp_menu_btn .nav_btn.open_btn span:nth-child(2){
	transform: rotate(55deg);
	right: -1px;
	width: 13px;
}

.sp_menu_btn .nav_btn.close_btn span{left: 0;}
.sp_menu_btn .nav_btn.close_btn span:nth-child(1){transform: rotate(45deg);}
.sp_menu_btn .nav_btn.close_btn span:nth-child(2){transform: rotate(-45deg);}

.sp_menu_btn .close,.sp_menu_btn .open{
	display: inline-block;
	font-size: 14px;
}
.sp_menu_btn.opennow .open{display: none!important;}
.sp_menu.navclose{bottom: -80px;}


/* under page */
#main_img2 {
    background-position: center center;
}
#contents .cate_wrap .cate_title{
    background-color: #000;
    color: #fff;
}

/* cms1 */
.pager li a{
    color: #fff;
    background-color: #000;
}

/* cms2 */

/* cms3 */

/* cms4 */

/* cms5 */

/* page7 */

/* page8 */
.tel_box a{
    padding: 0;
}

/* page9 */

/* page10 */
#contents .cate_wrap .cate ul li a{
    color: #212121 !important;
}

/* IE */
@media all and (-ms-high-contrast: none){
    .banner a{
        padding-bottom: 15px;
    }
    
}

/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
	#main_menu {
		margin-bottom: 0;
	}
	#main_img{
		margin-bottom: 50px;
	}
	.catch .catch1 {
		font-size: 30px;
	}
	.catch .catch2 {
		font-size: 14px;
	}
	#aisatsu .aisatsu_txt h2 {
		max-width: 80%;
	}
	#aisatsu .intro_point {
		justify-content: space-around;
	}
	footer{
		padding-bottom: 100px !important;
	}
	
}
/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
	.banner{
		display: none;
	}
	.header {
		margin-bottom: 0;
	}
	.catch {
		width: 100%;
		padding-top: 3%;
		padding-bottom: 3%;
	}
	.catch .catch1 {
		font-size: 18px;
	}
	.catch .catch2 {
		font-size: 11px;
	}
	#main_img{
		margin-bottom: 0;
	}
	#aisatsu .aisatsu_txt {
		padding-top: 30px;
		padding-bottom: 30px;
	}
	#aisatsu .intro_point {
		margin-bottom: 70px;
	}
	#aisatsu .aisatsu_txt h2 {
		padding-left: 0;
	}
	.point1, .point2{
		margin-bottom: 20px;
	}
	footer{
		padding-bottom: 150px !important;
	}
	.sp_menu li a {
        font-size: 10px;
    }
    #cms_1-a .pager li {
        margin: 0;
    }
	
}

