/*///----- column -----///*/
#columnBox{background:url(../img/column/footer.jpg)  center bottom no-repeat #fff;}
#columnBox h2{position:relative;
	background-image:url(../img/column/title.jpg) ;background-repeat:no-repeat;}
#columnBox h2 small{position: absolute;bottom: 0px; right: 5px;font-size:120%;line-height:100%;font-weight:bold;color:#004561;transform: rotate(.03deg);}
#columnBox h3{font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN",メイリオ,Meiryo,sans-serif;
	color:#004561;
	background:url(../img/column/h3.png)  left bottom no-repeat;}
	#columnBox .innerbox{border-top:dashed 3px #004561;}
	#columnBox .txt small{font-size:80%;}

@media all and (min-width: 768px) {
#columnBox {width:590px;padding-bottom:30px;margin:30px 0;}
#columnBox h2{width:590px;height:240px;}
	#columnBox .innerbox{width:540px;padding:20px 0;margin:0 auto;}
	#columnBox h3{font-size:140%;height:63px;
	background:url(../img/column/h3.png)  left bottom no-repeat;}
	#columnBox h3 span{margin-left:55px;line-height:63px;}
	#columnBox .txt{margin-top:20px;font-size:100%;}
}

@media all and (max-width: 767px) {
#columnBox{width:100%;margin:0;padding:0;}
#columnBox h2{width:100%;height:0;padding-top:40.7%;background-size:cover;}
	#columnBox .innerbox{width:90%;;padding:2em 0;margin:0 auto;}
	#columnBox h3{font-size:110%;}
	#columnBox h3{height:30px;
	background:url(../img/column/h3.png)  left bottom no-repeat;background-size:contain;}
	#columnBox h3 span{display:block;line-height:30px;margin-left:40px;}
	#columnBox .txt{margin-top:2em;}
}

@media all and (max-width: 320px) {
	#columnBox h3 span{line-height:1;}
}

/*///////////////// tab menu ////////////////*/
.btnBox li a{text-decoration:none;color: #004561;}
.btnBox li a:hover{ text-decoration:none;color: #004561;}
.btnBox {
  display: flex;
  justify-content: center;
  flex-flow: row wrap;
}
.btnBox li{
  position: relative;
  border: 3px solid #004561;
  color: #004561;
  font-size: 1.15rem;font-weight:bold;
  z-index: 50;
}

.btnBox li.button--bop{cursor: pointer}

.btnBox li.button--bop::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -50;
  background-color:rgba(220,231,255,0.5);
  transition: all 200ms ease-out;
}
.btnBox li.button--bop:hover::before {top: 0;left: 0;}
.button--bop:active {transform: translateY(3px);}
.button--nolink{
	opacity: 0.3;
}

@media all and (min-width: 768px) {
.btnBox {width:590px;margin:10px auto;}
.btnBox li{margin:6px;padding:8px 36px}
.btnBox li.button--bop::before  {left: -.6rem;top: -.5rem;}
.btnBox li a{ display: block;}
}

@media all and (max-width: 767px) {
.btnBox {width:100%; margin: 15px 0;}
.btnBox li{border: 2px solid #004561;font-size: 90%; margin: 5px 10px; padding: 3px 2em; width:25%; text-align: center; }
.btnBox li.button--bop::before  { left: -.4rem; top: -.3rem;}
 }
@media all and (max-width: 320px) {
.btnBox li{padding:0 1em;}
 }


/*///////////////// fukidashi ////////////////*/
.point{ text-align: right;}

.point .fukidashi{position: relative;display: inline-block;margin:0;padding: 0;background:#eff5fd;}
.point .fukidashi:after{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: -15px;
  top: 30px;
  border-right: 15px solid #eff5fd;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;}
.point .icon{display:block;background:url(../img/column/icon.png)  no-repeat;}
.t_plus{ font-size: 90%; text-align: right;}

@media all and (min-width: 768px) {
.point .icon{width:160px;height:150px;}
.point .pointBox{margin-bottom:10px;}
.pointBox p{padding:20px;}
}

@media all and (max-width: 767px) {
.point{width:100%;}
.point .icon{width:30%;height:0;padding-top:30%;background-size:contain;}
.point .pointBox{margin-bottom:3em;}
.pointBox p{padding:1em;}
.point .icon{position:relative;}
.point .icon img {position:absolute;top:0;left:0;}
}


/*///////////////// photo ////////////////*/
.column .photo_tate,
.column .photo_yoko,
.column .photo_yoko2,
.column .photo_square{display:block;background-color:#f4f1e4;}

@media all and (min-width: 768px) {
.column .photo_tate .lazy{display:block;width:300px;height:400px;}
.column .photo_yoko .lazy{display:block;width:400px;height:250px;}
.column .photo_yoko2 .lazy{display:block;width:400px;height:300px;}
.column .photo_square .lazy{display:block;width:400px;height:400px;}
.column .photo_tate{display:block;width:300px;height:400px;margin:10px auto;}
.column .photo_yoko{display:block;width:400px;height:250px;margin:10px auto;}
.column .photo_yoko2{display:block;width:400px;height:300px;margin:10px auto;}
.column .photo_square{display:block;width:400px;height:400px;margin:10px auto;}
}
@media all and (max-width: 767px) {
.column .photo_tate{width:70%;margin:1em auto;}
.column .photo_square{width:80%;margin:1em auto;}
.column .photo_tate .lazy{display:block;width:100%;height:0;padding-top:133.5%;}
.column .photo_yoko .lazy{display:block;width:100%;height:0;padding-top:62.5%;margin:1em auto;}
.column .photo_yoko2 .lazy{display:block;width:100%;height:0;padding-top:75%;margin:1em auto;}
.column .photo_square .lazy{display:block;width:100%;height:0;padding-top:100%;margin:1em auto;}
 }