@charset "utf-8";

*{
  box-sizing:border-box;
}

body{
  margin:0;

}

@media(min-width:901px){
	.sponly{
	  display:none !important;
	}
  }
@media(max-width:900px){
  .pconly{
    display:none !important;
  }
}
@media(min-width:1101px){
	.tbonly{
		display:none !important;
	}
}
@media(max-width:1100px){
	.tb_2only{
	  display:none !important;
	}
}
/*変数*/
:root{
	--basecolor: #edffe9 ; /*基本色*/
	--sabcolor: #f2ffec; /*サブカラー*/
}

img{
  max-width:100%;
  vertical-align:bottom;
}


p{
	margin:0
}

h3{
	margin:0;
}

.tac{
	text-align: center;
}
.tal{
	text-align: left;
}
.tar{
	text-align: right;
}
.mg0{
	margin: 0 auto;
}


.margin1{
	margin:10px
}
.margin2{
	margin:20px
}
.margin3{
	margin:30px
}
.margin4{
	margin:40px
}
.margin5{
	margin:50px
}
.mgb1{
	margin-bottom:10px
}
.mgb2{
	margin-bottom:20px
}
.mgb3{
	margin-bottom:30px
}
.mgb4{
	margin-bottom:40px
}
.mgb5{
	margin-bottom:50px
}
.mgt1{
	margin-top:10px
}
.mgt2{
  margin-top:20px
}
.mgt3{
	margin-top:30px
}
.mgt4{
	margin-top:40px
}
.mgt5{
	margin-top:50px
}
.mgl1{
	margin-left:10px
}
.mgl2{
	margin-left:20px
}
.mgl3{
	margin-left:30px
}
.mgl4{
	margin-left:40px
}
.mgl5{
	margin-left:50px
}
.mgr1{
	margin-right:10px
}
.mgr2{
  margin-right:20px
}
.mgr3{
	margin-right:30px
}
.mgr4{
	margin-right:40px
}
.mgr5{
	margin-right:50px
}
.n_mgt5{
	margin-top:5%
}

.padding1{
	padding:10px
}
.padding2{
	padding:20px
}
.padding3{
	padding:30px
}
.padding4{
	padding:40px
}
.padding5{
	padding:50px
}
.pdt1{
	padding-top:10px
}
.pdt2{
  padding-top:20px
}
.pdt3{
  padding-top:30px
}
.pdt4{
  padding-top:40px
}
.pdt5{
	padding-top:50px
}
.pdt6{
	padding-top:60px
}
.pdt7{
	padding-top:70px
}
.pdt8{
	padding-top:80px
}
.pdt9{
	padding-top:90px
}
.pdt10{
	padding-top:100px
}
.pdb1{
	padding-bottom:10px
}
.pdb2{
  padding-bottom:20px
}
.pdb3{
  padding-bottom:30px
}
.pdb4{
  padding-bottom:40px
}
.pdb5{
	padding-bottom:50px
}
.pdb6{
	padding-bottom:60px
}
.pdb7{
	padding-bottom:70px
}
.pdb8{
	padding-bottom:80px
}
.pdb9{
	padding-bottom:90px
}
.pdb10{
	padding-bottom:100px
}
.pdr5{
	padding-right:30% ;

}

/*----------
特殊例
-----------*/
/*----------
マーカー下線
----------*/
.marker_line {
    background: linear-gradient(transparent 60%, var(--basecolor) 0%);
}
.marker_line_oreng{
	background: linear-gradient(transparent 50%, #ffd95d9f 50%);
}
/*---------
 題字下下線
 ----------*/
.hr-green {
    border-top: 2px solid #3ca27e;
    width: 80px;
}
/*--------------
矢印が右に移動する
----------------*/
.btnarrow4{
    /*矢印と下線の基点とするためrelativeを指定*/
	position: relative;
    /*形状*/
    display:block;
    color: #333;
    text-decoration: none;
    outline: none;
}
/*矢印と下線の形状*/
.btnarrow4::before{
    content: '';
    /*絶対配置で下線の位置を決める*/
	position: absolute;
    bottom:-8px;
    left:0;
    /*下線の形状*/    
    width: 60%;
    height: 1px;
	background:#333;
    /*アニメーションの指定*/
    transition: all .3s;
}
.btnarrow4::after{
    content: '';
    /*絶対配置で矢印の位置を決める*/
	position: absolute;
    bottom:-3px;
    right:40%;
    /*矢印の形状*/    
    width: 15px;
    height:1px;
	background:#333;
    transform: rotate(35deg);
    /*アニメーションの指定*/
    transition: all .3s;
}
/*hoverした際の移動*/
.btnarrow4:hover::before{
    left:10%;
}
.btnarrow4:hover::after{
    right:30%;
}

/*-------------
ボタン共通設定
--------------*/
.btn06{
    /*矢印の基点とするためrelativeを指定*/
	position: relative;
    /*ボタンの形状*/
	text-decoration: none;
	display: inline-block;
	color:#000000;
    padding: 10px 40px 10px 30px;
    text-align: right;
    outline: none;
	border: 1px solid #83e66d ;
	background-color: #83e66d;
    /*アニメーションの指定*/
    transition: ease .2s;
}

.btn06:hover{
	background-color: #cbfcdb ;
	border: 1px solid #cbfcdb;
}
/*--------------
矢印が右に移動
--------------*/
.btnarrow1::after{
    content: '';
    /*絶対配置で矢印の位置を決める*/
	position: absolute;
    top:42%;
    right: 20px;
    /*矢印の形状*/
    width: 5px;
    height: 5px;
    border-top: 2px solid #000;
    border-right: 2px solid #000;
    transform: rotate(45deg);
    /*アニメーションの指定*/
    transition: all .3s;
}

/*hoverした際の移動*/
.btnarrow1:hover::after{
    right: 11px;
}

/*------------
きらっと光る
------------*/
.btnshine{
    /*キラッと光る基点とするためrelativeを指定*/
	position: relative;
    /*ボタンの形状*/	
	display:inline-block;

    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    outline: none;
    overflow: hidden;
}

/*キラッと光る*/
.btnshine::before {
	content: '';
    /*絶対配置でキラッと光るの位置を決める*/
	position: absolute;
	top: 0;
	left: -75%;
    /*キラッと光る形状*/
    width: 50%;
	height: 100%;
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	transform: skewX(-25deg);
}

/*hoverした際の移動のアニメーション*/
.btnshine:hover::before {
	animation: shine 0.7s;
}

@keyframes shine {
	100% {
		left: 125%;
	}
}

/*-------------
 文字animation
-------------*/
@-webkit-keyframes passing-bar{
	0% {
		left: 0;
		right: auto;
		width: 0;
	}
	50% {
		left: 0;
		right: auto;
		width: 100%;
	}
	51% {
		left: auto;
		right: 0;
		width: 100%;
	}
	100% {
		left: auto;
		right: 0;
		width: 0;
	}
}
@keyframes passing-bar{
	0% {
		left: 0;
		width: 0;
	}
	50% {
		left: 0;
		width: 100%;
	}
	51% {
		left: 0;
		width: 100%;
	}
	100% {
		left: 100%;
		width: 0;
	}
}
@-webkit-keyframes passing-txt{
	0% { opacity: 0; }
	50% { opacity: 0; }
	100% { opacity: 1; }
}
@keyframes passing-txt{
	0% { opacity:0; }
	50% { opacity:0; }
	100% { opacity:1; }
}
/* css */
.passing .passing-box {
	display: block;
	text-align: center;
}
.passing .passing-bar {
	position: relative;
	display: inline-block;
	/*　後ほど解説　*/
	-webkit-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
.passing .passing-bar:before {
	content: '';
	display: inline-block;
	width: 0;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	/* 任意の値 */
	background: #11b319;
}
.passing .passing-txt {
	opacity: 0;
	/* 後ほど解説 */
	-webkit-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	/* 任意の値 */
	font-size: 3vw;
	font-weight: bold;
	line-height: 1.5;
}
.passing.move .passing-bar:before {
	-webkit-animation: passing-bar 1s ease 0s 1 normal forwards;
	animation: passing-bar 1s ease 0s 1 normal forwards;
}
.passing.move .passing-txt {
	-webkit-animation: passing-txt 0s ease .5s 1 normal forwards;
	animation:passing-txt 0s ease .5s 1 normal forwards;
}



/*------------*/

.flex{
	display: flex;
}
.flex_wrap_reverse{
	display: flex;
}

.mask{
	display: block;
    line-height: 0;
    overflow: hidden;
}
.taikoban_wrap{
	width:95%;
	max-width: 1400px;
	margin: 0% auto 0;
}
.taikoban_flex{
	display: flex;
	flex-wrap: wrap;
	margin-top:30px;
}
.taikoban_block{
	display: block;
	width: 20%;
	position: relative;
	margin: 2.5vw 2.5% 30px;
	color:#333;
}

@media(max-width:900px){
	.taikoban_block{
		width: 28.25%;
	}
}
@media(max-width:650px){
	.taikoban_block{
		width: 100%;
	}
}

.taikoban_block::after{
	content: "";
	position: absolute;
	width: 90%;
	height: 90%;
	bottom: 0;
	right: 0;
	background: #f0f0f0;
	z-index: -1;
}
.t_name{
	position: absolute;
	font-size:90%;
	background: #777;
	color: #fff;
	padding: 2px 20px 6px;
	top: -15px;
	left: -10px;
	z-index: 1;
}
.t_img{
	width: 90%;
	padding: 0% 0 3%;
}
.t_img img{
	height: 200px;
	width: 350px;
	object-fit: cover;
	transform: scale(1);
	transition: .3s ease-in-out;
}
.t_img p{
	margin-top: 10px;
	font-weight: bold;
	font-size:95%;
}
.move{
	position: relative;
    /*ボタンの形状*/	
    display: inline-block;
    color: #333;
	padding:0 0 0 15px;
	line-height: 30px;
    text-decoration: none;
    outline: none;
	z-index: 1;
	margin: 0 30px 20px 0;
}
.move::before{
	content:'';
    /*絶対配置で丸の位置を決める*/
	position:absolute;
	left:0;
	z-index: -1;
    /*丸の形状*/
	width:30px;
	height:30px;
	background:#ccc;
	border-radius:25px;
    /*アニメーションの指定*/
    transition:.3s ease-out;
}
.move::after{
	position: absolute;
    content: '';
    top: 13px;
    right: -25px;
    width: 5px;
    height: 5px;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    transform: rotate(45deg);
}
.taikoban_block:hover .t_img img{
	transform: scale(1.2);
}
.taikoban_block:hover .move{
	color: #fff;
}
.taikoban_block:hover .move::before{
	width:90px;
	background:#ed7895;
}
.taikoban_block:hover .move::after{
	border-top: 1px solid #fff;
    border-right: 1px solid #fff;
}
/*taikoban_block2*/
.taikoban_block2{
	display: block;
	width: 20%;
	position: relative;
	margin: 2%;
	background: #f1f1f1;
}
.t_img2 .t_name2{
	text-align: center;
	background: #ed7895;
	width: 70%;
	margin: 10px auto;
	color: #fff;
	font-weight: normal;
}
.t_img2 p{
	padding: 1% 3%;
	font-weight: bold;
}
.t_img2 img{
	height: 200px;
	width: 350px;
	object-fit: cover;
	transform: scale(1);
	transition: .3s ease-in-out;
}
.move2{
	position: relative;
    /*ボタンの形状*/	
    display: inline-block;
    color: #333;
	padding:0 0 0 15px;
	line-height: 30px;
    text-decoration: none;
    outline: none;
	z-index: 1;
	margin: 0 30px 20px 0;
}
.move2::after{
	position: absolute;
    content: '';
    top: 0px;
    right: -2px;
    width: 5px;
    height: 5px;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    transform: rotate(45deg);
	transition: all 0.3s;
}
.taikoban_block2:hover .t_img2 img{
	transform: scale(1.2);
}
.taikoban_block2:hover .move2::after{
	right: -12px;
}
/*taikoban_block3*/
.taikoban_block3{
	display: block;
	width: 20%;
	position: relative;
	margin: 2%;
}
.taikoban_block3::after{
	content: "";
	position: absolute;
	width: 60%;
	height: 60%;
	bottom: 0;
	right: 0;
	background: #f1f1f1;
	z-index: -1;
	border-radius: 50%;
}
.t_text{
	/*font-weight: bold;*/
	margin-top: 10px;
	font-weight:normal;
}
.t_img3{
	width: 95%;
	padding: 0 0 7%;
}
.mask2{
	display: block;
    line-height: 0;
    overflow: hidden;
    border-radius: 15px;
}
.t_img3 img{
	height: 200px;
	width: 350px;
	transform: scale(1);
	overflow: hidden;
	transition: .3s ease-in-out;
}
.t_name3{
	text-align: center;
	margin: 10px auto;
	width: 70%;
}
.taikoban_block3:hover .t_img3 img{
	transform: scale(1.2);
}
.taikoban_block4{
	display: block;
	width: 20%;
	position: relative;
	margin: 2%;
	background: #f1f1f1;
}
.t_name4{
	text-align: center;
	padding: 3%;
}
.t_img4{
	padding: 0 5%;
}
.t_img4 img{
	height: 200px;
	width: 350px;
	object-fit: cover;
	transform: scale(1);
	overflow: hidden;
	transition: .3s ease-in-out;
}
.taikoban_block4 .move{
	margin-right: 40px;
}
.taikoban_block4:hover .move::before{
	width:90px;
	background:#ed7895;
}
.taikoban_block4:hover .t_img4 img{
	transform: scale(1.2);
}






/*--------------SP--------------■■■■■■■■■■■*/
@media(max-width:1100px){



	/*-------- contact page ----------*/



}
@media(max-width:950px){
	/*------共通---------*/
	.flex_wrap_reverse{
		flex-wrap: wrap-reverse;
	}
	.flex{
		flex-wrap: wrap;
	}
	/*------ sp menu --------*/
	.header_menu_sp{
		position: fixed;
		left: 53px;
		top: 12px;
		z-index: 3;
		background-color: #55321f;
		border-radius: 5px;
	}
	.header_menu_sp img{
		width: 34px;
		vertical-align:bottom;
	}
	.contents_box{
		padding-left: 0;
	}
	.wrap2{
		margin: 50px 0 0;
	}
	/*----- sp under menu ------*/
	.sp_under{
		position: fixed;
		bottom: 0;
		text-align: center;
		width: 100%;
		display: flex;
		z-index: 1;
		font-family: 'Krona One', sans-serif;

	}
	.sp_under a{
		background-color: #55321f;
		font-size: 130%;
		display: inline-block;
		width: 50%;
		padding: 20px;
		color: #fff;
		letter-spacing: 3px;
	}
	.sp_under a:first-child{
		border-right:1px solid #fff
	}

	/*-------- contents -----------*/
	/*---- 別page共通------*/
	.contents_box_2 {
		width: 100%;
		padding-right: 0px;
	}
	.yohaku {
		margin: 100px 0;
	}
	.yohaku-2 {
		margin: 50px 0;
	}
	.midashi_green{
		font-size: 5vw;
	}
	/*----------- contact page----------------*/
	.co_table{
		clear: left;
		float: left;
		/* width: 10%; */
	}
	.co_table dt{
		float: left;
		margin-left: 0%;
    }
	.co_table dd{
		margin-left: 0%;
	}

}