@charset "UTF-8";
/******************************************
post 4175 CSSのFlexboxを徹底解説！
******************************************/
.postid-4175 .box{
    background: #55acef;
    padding: 20px;
}
.postid-4175 .box li{
    list-style: none!important;
}
/*flexコンテナ*/
.postid-4175 .flexbox{
    display: flex;
}
.postid-4175 .flexbox--long{
	height: 600px;
}
.postid-4175 .flexbox--row-reverse{
    flex-direction: row-reverse;
}
.postid-4175 .flexbox--column{
    flex-direction: column;
}
.postid-4175 .flexbox--column-reverse{
    flex-direction: column-reverse;
}
@media screen and (max-width:768px){
	.flexbox-sp-wrap{
		flex-wrap: wrap;
	}
}
.postid-4175 .flexbox--wrap{
    flex-wrap: wrap;
}
.postid-4175 .flexbox--wrap-reverse{
    flex-wrap: wrap-reverse;
}
.postid-4175 .flexbox--end{
    justify-content: flex-end;
}
.postid-4175 .flexbox--center{
    justify-content: center;
}
.postid-4175 .flexbox--bet{
    justify-content: space-between;
}
.postid-4175 .flexbox--aro{
    justify-content: space-around;
}
.postid-4175 .flexbox--astart{
    align-items: flex-start;
}
.postid-4175 .flexbox--aend{
    align-items: flex-end;
}
.postid-4175 .flexbox--acstart{
	align-content: flex-start;
}
.postid-4175 .flexbox--acend{
	align-content: flex-end;
}
.postid-4175 .flexbox--accenter{
	align-content: center;
}
.postid-4175 .flexbox--acbet{
	align-content: space-between;
}
.postid-4175 .flexbox--acaro{
	align-content: space-around;
}
/*flexアイテム*/
.postid-4175 .flexbox__item{
    background: #fff;
    color: #55acef;
    padding: 20px;
}
.postid-4175 .flexbox__item--fl{
	float: left;
}
.postid-4175 .flexbox__item1{order: 4;}
.postid-4175 .flexbox__item2{order: 3;}
.postid-4175 .flexbox__item3{order: 2;}
.postid-4175 .flexbox__item4{order: 1;}

.postid-4175 .flexbox__item1-2{order: 4;}
.postid-4175 .flexbox__item2-2{order: 4;}
.postid-4175 .flexbox__item3-2{order: 4;}
.postid-4175 .flexbox__item4-2{order: 4;}

.postid-4175 .flexbox__item1-3{flex-grow: 2;}
.postid-4175 .flexbox__item2-3{flex-grow: 1;}
.postid-4175 .flexbox__item3-3{flex-grow: 1;}
.postid-4175 .flexbox__item1-4{flex-grow: 3;}

.postid-4175 .flexbox__item1-5{flex-shrink: 3;}
.postid-4175 .flexbox__item2-5{flex-shrink: 1;}
.postid-4175 .flexbox__item3-5{flex-shrink: 1;}
.postid-4175 .flexbox__item4-5{flex-shrink: 1;}
.postid-4175 .flexbox__item5-5{flex-shrink: 1;}
.postid-4175 .flexbox__item6-5{flex-shrink: 1;}

.postid-4175 .flexbox__item1-6{flex-basis: 50%;}
.postid-4175 .flexbox__item2-6{flex-basis: 200px;}
.postid-4175 .flexbox__item3-6{flex-basis: 300px;}
.postid-4175 .flexbox__item4-6{flex-basis: 400px;}

.postid-4175 .flexbox__item1-7{align-self: flex-start;}
.postid-4175 .flexbox__item1-8{align-self: flex-end;}
.postid-4175 .flexbox__item1-9{align-self: center;}
.postid-4175 .flexbox__item1-10{align-self: stretch;}
.postid-4175 .flexbox__item1-11{align-self: baseline;}
/******************************************
post 4213 Googleマップ
******************************************/
.gmap {
    height: 0;
    overflow: hidden;
    padding-bottom: 56.25%;
    position: relative;
}
.gmap iframe {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
/******************************************
post 3876 vw・vh
******************************************/
.p3876 .parent{
    background: #42cfd1;
    height: 400px;
}
/******************************************
post 5167 animation
******************************************/
@keyframes animation-sample{
	0%{
		width: 50px;
	}
	100%{
		width: 100%;
	}
}
.postid-5167 .animation-box-style{
	background: #000;
	height: 50px;
	width: 50px;
}
.postid-5167 .animation-box{
	animation-name: animation-sample;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	margin-left:0;
}

.postid-5167 .animation-box2{
	animation-name: animation-sample;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	margin-left:0;
}

@keyframes animation-sample3{
	0%{
		width: 0;
	}
	25%{
		width: 50%;
	}    
	50%{
		width: 25%;
	}
	75%{
		width: 50%;
	}    
	100%{
		width: 100%;
	}
}
.postid-5167 .animation-box3{
	animation-name: animation-sample3;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	margin-left:0;
}

@keyframes animation-sample4{
	0%{
	}
	20%{
		background: #00e34b;
		transform: scale(1.2) rotate(45deg);
	}    
	40%{
		background: #e2ea00;
		transform: scale(0.8) rotate(-45deg);
	}
	60%{
		background: #ea8400;
		transform: scale(1) rotate(90deg);
	}    
	80%{
		background: #ea0000;
		transform: scale(1.2) rotate(-90deg);
	}    
	100%{
		background: #00b3e3;
		transform: scale(1) rotate(0deg);
	}
}
.postid-5167 .animation-box4{
	animation-name: animation-sample4;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	background: #00b3e3;
	height: 100px;
	margin-left:0;
	width: 100px;
}
.postid-5167 .animation-box5{
    animation-name: animation-sample;
    animation-duration: 5s;
    animation-iteration-count: infinite;
	margin-left:0;
}
.easing td:first-child{
	width:20%;
}
.postid-5167 .animation-box6{
	height: 10px;
	margin-left:0;
}
.postid-5167 .animation-box6.on{
	animation-name: animation-sample;
	animation-duration: 3s;
	animation-fill-mode: forwards;
}
.postid-5167 .animation-box6-2{
	animation-timing-function: linear;
}
.postid-5167 .animation-box6-3{
	animation-timing-function:ease-in;
}
.postid-5167 .animation-box6-4{
	animation-timing-function:ease-out;
}
.postid-5167 .animation-box6-5{
	animation-timing-function:ease-in-out;
}
.postid-5167 .animation-box6-6{
	animation-timing-function:step-start;
}
.postid-5167 .animation-box6-7{
	animation-timing-function:step-end;
}
.postid-5167 .animation-box6-8{
	animation-timing-function:steps(5,start);
}
.postid-5167 .animation-box6-9{
	animation-timing-function:steps(5,end);
}
.postid-5167 .animation-box6-10{
	animation-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); /* easeInOutExpo */;
}
.postid-5167 .animation-box7{
	margin-left:0;
}
.postid-5167 .animation-box7.on{
    animation-name: animation-sample;
    animation-duration: 3s;
	animation-delay: 3s;
	animation-fill-mode: forwards;
}
.postid-5167 .animation-box8{
	margin-left:0;
}
.postid-5167 .animation-box8.on{
    animation-name: animation-sample;
    animation-duration: 1s;
	animation-fill-mode: forwards;
	animation-iteration-count: 3;
}
.postid-5167 .animation-box8--2.on{
    animation-name: animation-sample;
    animation-duration: 1s;
	animation-fill-mode: forwards;
	animation-iteration-count:infinite;
}
.postid-5167 .animation-box9{
	margin-left:0;
}
.postid-5167 .animation-box9.on{
    animation-name: animation-sample;
    animation-duration: 3s;
	animation-iteration-count: infinite;
}
.postid-5167 .animation-box9-2.on{
	animation-direction: reverse;
}
.postid-5167 .animation-box9-3.on{
	animation-direction: alternate;
}
.postid-5167 .animation-box9-4.on{
	animation-direction: alternate-reverse;
}
.postid-5167 .animation-box10{
	margin-left:0;
}
.postid-5167 .animation-box10.on{
    animation-name: animation-sample;
    animation-duration: 3s;
}
.postid-5167 .animation-box10-2.on{
	animation-fill-mode: forwards;
}
.postid-5167 .animation-box10-3.on{
	animation-fill-mode: backwards;
}
.postid-5167 .animation-box10-4.on{
	animation-fill-mode: both;
}
.postid-5167 .animation-box11{
	margin-left:0;
}
.postid-5167 .animation-box11.on{
    animation-name: animation-sample;
    animation-duration: 3s;
	animation-fill-mode: forwards;
}
.postid-5167 .animation-box11.stop{
	animation-play-state: paused;
}
@keyframes fadeIn{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1
	}
}
@keyframes widthIn{
	0%{
		width: 0;
	}
	100%{
		width: 100%
	}
}
.postid-5167 .animation-box12{
	animation: fadeIn 3s infinite, widthIn 3s infinite;
	margin-left:0;
}
/******************************************
post 5316
******************************************/
.acd-check{
	display: none;
}
.acd-label{
	background: #0068b7;
	color: #fff;
	cursor: pointer;
	display: block;
	margin-bottom: 1px;
	padding: 10px;
	position: relative;
}
.acd-label:after{
	background: #00479d;
	box-sizing: border-box;
	content: '\f067';
	display: block;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	height: 100%;
	padding: 10px 20px;
	position: absolute;
	right: 0;
	top: 0px;
}
.acd-content{
	border: 1px solid #333;
	display: block;
	height: 0;
	opacity: 0;
	margin:0;
	padding: 0 10px;
	transition: .5s;
	visibility: hidden;
}
.acd-check:checked + .acd-label:after{
	content: '\f068';
}
.acd-check:checked + .acd-label + .acd-content{
	height: 50px;
	opacity: 1;
	padding: 10px;
	visibility: visible;
}
/******************************************
post 5670
******************************************/
.postid-5670 .menu__item {
  background: #5200b7;
  color: #fff;
  cursor: pointer;
  display: block;
  margin-bottom: 1px;
  position: relative;
}
.postid-5670 .menu__item:before,
.postid-5670 .submenu__item:before{
	content:none!important;
}
.postid-5670 .menu__item__link {
  color: #fff;
  display: block;
  padding: 1rem;
}
 
.postid-5670 .submenu {
  background: #fff;
  display: none;
}
.postid-5670 .submenu__item {
  border-bottom: 1px solid #5200b7;
  color: #222;
  list-style: none;
  padding: 1rem;
}
/******************************************
post 7976
******************************************/
.object-fit img{
	display: block;
}
.object-fit p{
	line-height: 1.4;
}
@media screen and (max-width:768px){
	.object-fit p{
		max-height: 150px;
		overflow: hidden;
	}
}
.object-fit .container{
	display: flex;
	justify-content: space-between;
}
.object-fit .container-item{
	width: 30%;	
}
.object-fit .container-item-img{
	border: 1px solid #ccc;
}

.object-fit2 .container-item-img{
	height: 150px;
	overflow: hidden;
}

.object-fit3 .container-item-img{
}
.object-fit3 .container-item-img img{
	height: 150px;
	object-fit: fill;
	width: 100%;
}

.object-fit4 .container-item-img img{
	font-family: 'object-fit: contain;';
	height: 150px;
	object-fit: contain;
	width: 100%;
}

.object-fit5 .container-item-img img{
	font-family: 'object-fit: cover;';
	height: 150px;
	object-fit: cover;
	width: 100%;
}

.object-fit6 .container-item-img img{
	height: 150px;
	object-fit: none;
	width: 100%;
}

.object-fit7 .container-item-img img{
	height: 150px;
	object-fit: scale-down;
	width: 100%;
}

.object-fit8 .container-item-img img{
	height: 150px;
	object-fit: none;
	width: 100%;
}
.object-fit8 .container-item:nth-child(1) img{
	object-position: 40px 40px;/*pxで指定*/
}
.object-fit8 .container-item:nth-child(2) img{
	object-position: 100% 0;/*右上*/
}
.object-fit8 .container-item:nth-child(3) img{
	object-position: right bottom;/*右下*/
}

.object-fit9 .video{
	height: 150px;
	object-fit: cover;
	width: 100%;
}