/* --------------- main --------------- */

.col_topmainimg {
	width: 100%;
	margin: 0;
	padding: 0 0 0;
}

.bg_topmain{
	width: 100%;
	background-color: #003d67;

}

.inner_main {
	width: 100%;
	max-width: 1260px;
	max-height: 650px;
	margin: 0 auto 75px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	position: relative;
	z-index: 0;
	overflow: hidden;
}





@media print,
screen and (max-width: 720px) {
	.inner_main{
		max-height: 147vw;
		margin: 0 0 12%;
	}

}




.txt_main{
	width: 60vw;
	max-width: 566px;
	margin: 0;
	padding: 0;
	position: absolute;
	left: 5.5%;
	top: 36%;
	color: #fff;
	font-size: 29px;
	z-index: 2;
}

.txt_main:before{
	content: "";
	width: 12px;
	height: 258px;
	background-image: url(../img/top/icon_scrol.svg);
	background-size: 100%;
	background-repeat: no-repeat;
	position: absolute;
	top: 17%;
    left: -6%;
	
}

.txt_main img{
	width: 293px;
	position: absolute;
	bottom: 86%;
	right: 51%;
}


span.font{
	font-size: 90px;
	font-weight: 400;
	font-family: "Shippori Antique", sans-serif;
	font-style: normal;
	line-height: 1;
	letter-spacing: 12px;
	text-shadow: 0 0 6px #003d67;
}

span.normal{
	letter-spacing: 0.09em;
}

.wrap{
	width: 89%;
	max-width: 820px;
}

.wrap2{
	width: 89%;
	max-width: 260px;
}
.content{
  height: 2138px;
  width: 100%;
  max-width: 820px;
  position: relative;
  overflow: hidden;
}

.swiper{
  height: 100%;
  width: calc(100% / 3);
  position: absolute!important;
  
  &.swiper1{
  	width: 36%;
  	max-width: 290px;
    left: 0;
    top: 0;
  }
  
  &.swiper2{
  	width: 31%;
  	max-width: 251px;
    left: calc(34% + 13px);
    top: 0;
  }
  
  &.swiper3{
  	width: 31%;
  	max-width: 251px;
  	right: 3%;
  	top: 0;
  }
  
}

.swiper-wrapper {
  transition-timing-function: linear;
}

.swiper-slide{
	max-width: 290px;
	height: 100%!important;
}

.swiper-slide {
  img {
  	height: 100%;
    width: 100%;
    max-width: none;
  }
}

@media print,
screen and (max-width: 850px) {

.swiper{
  &.swiper1{
  	width: 35%;
  	max-width: 290px;
    top: 0;
  }
  
  &.swiper2{
  	width: 30%;
  	max-width: 251px;
    top: 0;
  }
  
  &.swiper3{
  	width: 30%;
  	max-width: 251px;
  	right: 4%;
  	top: 0;
  }
}

}




@media print,
screen and (max-width: 720px) {
	
	.content{
		height: 1065px;
	}
	
	.swiper-slide {
		height: 100%!important;
		object-fit: contain;
	}
	
	.txt_main{
		width: 80vw;
		line-height: 1.2;
		top: 28%;
	}
	
	span.font{
		font-size: 12.5vw;
		text-shadow: 0 0 8px #003d67;
	}
	
	span.normal{
		font-size: 4vw;
		text-shadow: 0 0 8px #003d67;
	}
	
	.txt_main:before{
		width: 3.5%;
		max-width: 18px;
		height: 295px;
		top: 105%;
		left: 2%;
		background-image: url(../img/top/sp/icon_scrol.png);
	}
	

	
	.swiper.swiper1.swiper-initialized.swiper-vertical{
		right: 10%;
		width: 45%;
		left: 0;
	}
	
	.swiper.swiper2.swiper-initialized.swiper-vertical{
		margin-right: 0;
		right: 0;
		width: 38%;
		left: 53%;
	}
	

	.swiper-slide img{
		object-fit: cover;
		width: 120%;
    }
	
	@keyframes Loop{
	0%{
		transform: translateY(0%);
	}
	
	100%{
		transform: translateY(-800px);
	}
}

@keyframes Loop2{
	0%{
		transform: translateY(0%);
	}
	
	100%{
		transform: translateY(800px);
	}
}
}

@media print,
screen and (max-width: 630px) {
	.swiper.swiper1.swiper-initialized.swiper-vertical{
		right: 25%;
	}

}

@media print,
screen and (max-width: 600px) {
	.swiper.swiper1.swiper-initialized.swiper-vertical{
		right: 0;
		margin-left: 0;
		left: 0;
	}

}

@media print,
screen and (max-width: 500px) {



  
  .swiper.swiper2.swiper-initialized.swiper-vertical{
  	right: -7%;
  }
  
  .swiper-slide img{
  	object-fit: contain;
  }
  
}

@media print,
screen and (max-width: 390px) {

	
	.swiper.swiper1.swiper-initialized.swiper-vertical{
		right: 15%;
	}
	
	
	.swiper.swiper2.swiper-initialized.swiper-vertical{
		margin-right: 0;
        right: -3%;
	}
	

	

}

@media print,
screen and (max-width: 370px) {
	
	.swiper.swiper1.swiper-initialized.swiper-vertical{
		right: 24%;
	}
}





/* --------------- top news --------------- */

.col_topnews{
	width: 100%;
	margin: 0 0 56px;
	padding: 0;
	color: #003d67;
}

.col_topnews .mds_top1,.col_topbusiness .mds_top1,.col_topcompany .mds_top1,.col_topcontact .mds_top1{
	margin: 0 0 36px;
	padding: 0;
	text-align: center;
	line-height: 1.3;
	position: relative;
	z-index: 0;
}

.inner_news{
	width: 82%;
	max-width: 1032px;
	margin: 0 auto;
	padding: 0;
	position: relative;
}

.inner_news .list{
	margin: 0 auto 58px;
	padding: 0;
	width: 100%;
	display: flex;
	justify-content: center;
}

.inner_news .list .item{
	width: 28.3%;
	margin: 0 7% 0 0;
	padding: 0;
}

.inner_news .list .item:nth-of-type(3){
	margin: 0;
	padding: 0;
}

.inner_news .list .item a{
	text-decoration: none;
}

.inner_news .list .item a .image{
/*	width: 100%;
	max-width: 293px;
	max-height: 185px;
	margin: 0 0 15px;
  position: relative;*/
  width: 100%;
  height: 185px;
  border-radius: 10px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  display: block;
  position: relative;
  margin: 0 0 15px;
}



.inner_news .list .item a .image .other_site {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 100px;
  height: 24px;
  color: #fff;
  line-height: 1.4em;
  font-size: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 0 18px 0 0;
}
.inner_news .list .item a .image .other_site.repair {
  background: #eb5b46;
}
.inner_news .list .item a .image .other_site.bath {
  background: #00a0e9;
}
.inner_news .list .item a .image .other_site:after {
  position: absolute;
  top: 50%;
  right: 9px;
  width: 10px;
  height: 10px;
  content: "";
  background: url("../img/news/icon_blank_01.png") no-repeat center center;
  background-size: 100% 100%;
  display: block;
  margin: -5px 0 0 0;
}

.inner_news .list .item a .image img{
	width: 100%;
	display: block;
	border-radius: 18px;
	filter: drop-shadow(4px 4.5px 0px #003d67);
}

.inner_news .list .item a .category_list{
	margin: 0 0 5px 0;
	overflow: hidden;
  font-size:0;
}

.inner_news .list .item a .category_list .category{
	margin: 0 5px 6px 0;
	padding: 3px 5px;
	text-align: center;
	line-height: 1.2em;
	font-size: 12px;
	border-radius: 2.5px;
	display: inline-block;
	box-sizing: border-box;
}

@media print, screen and (max-width: 1030px) {
	.inner_news .list .item{
		margin: 0 5% 0 0;
	}
}


@media print, screen and (max-width: 720px) {
	.col_topnews .mds_top1,.col_topbusiness .mds_top1,.col_topcompany .mds_top1,.col_topcontact .mds_top1{
		margin: 0 0 6.5%;
	}
	.inner_news{
		width: 91%;
	}
	
	.inner_news .list{
		display: block;
		margin: 0 auto 11%;
	}
	
	.inner_news .list .item{
		width: 100%;
		max-width: 650px;
		margin: 0 auto 50px;
	}
	
	.inner_news .list .item a{
		display: flex;
		width: 100%;
		max-width: 650px;
	}
	
	.inner_news .list .item:first-of-type a{
		display: block;
	}
	
	.inner_news .list .item a .image{
		width: 100%;
		max-width: 293px;
    height: 29vw;
/*		height: 100%;
		max-height: 209px;*/
    
	}
	
	.inner_news .list .item:first-of-type  a .image{
		width: 100%;
		max-width: 650px;
/*		height: 100%;
		max-height: 411px;*/
    height: 56.94vw;
		margin: 0 auto 4%;
	}
	
	.inner_news .list .item a .category_list{
		width: 100%;
		max-width: 100%;
		margin: 0 0 0 15px;
	}
	
	.more a{
		width: 308px;
	}
	
	.inner_news .list .item:first-of-type a .image img{
		filter: drop-shadow(10px 10px 0px #003d67);
	}
}


.category_list .category.mado{
	color: #003d67;
	border: 1px solid #003d67 !important;
}

.category_list .category.topic{
	color: #eda700;
	border: 1px solid #eda700 !important;
}

.category_list .category.ripea{
	color: #899855;
	border: 1px solid #899855 !important;
}

.category_list .category.zirei{
	color: #b286bd;
	border: 1px solid #b286bd !important;
}

.category_list .category.yuka{
	color: #16a2dc;
	border: 1px solid #16a2dc !important;
}

.category_list .category.cross{
	color: #d68db6;
	border: 1px solid #d68db6 !important;
}

.inner_news .list .item a .schedule{
	margin: 0;
	padding: 0;
	line-height: 1.6em;
	font-size: 18px;
	color: #003d67;
}

.inner_news .list .item a .title{
	margin: 0;
	padding: 0;
	line-height: 1.6em;
	font-size: 20px;
	color: #003d67;
	font-weight: 700;
}

.inner_news .list .item a .item_content{
	margin: 0;
	padding: 0;
	line-height: 1.6em;
	font-size: 18px;
	color: #003d67;
	width: 100%;
	max-width: 300px;
	white-space: nowrap; /* 横幅のMAXに達しても改行しない */
    overflow: hidden; /* 溢れた部分を隠す */
    text-overflow: ellipsis; /* 「…」と省略 */
    -webkit-text-overflow: ellipsis; /* Safari用 */
    -o-text-overflow: ellipsis; /* Opera用 */
}

.more{
	margin: 0;
	padding: 0;
	text-align: center;
}

.more a{
	width: 154px;
	padding: 10px 0 10px 12px;
	line-height: 1.2em;
	font-size: 15px;
	text-decoration: none;
	text-align: center;
	color: #000;
	border: solid 1px #003d67;
	border-radius: 90px;
	box-sizing: border-box;
	display: inline-block;
	position: relative;
	color: #003d67;
}

.more a:hover{
	background-color: #003d67;
	color: #fff;
}

@media print,
screen and (max-width: 1030px) {
	.inner_news .list .item a .schedule{
	font-size: 15px;
	}

.inner_news .list .item a .title{
	font-size: 2vw;
	}

.inner_news .list .item a .item_content{
	font-size: 1.5vw;
	}	
}

@media print,
screen and (max-width: 720px) {
	.inner_news .list .item a .title{
		font-size: min(5vw , 40px);
	}
	
	.inner_news .list .item a .item_content{
		font-size: min(4.5vw , 36px);
	}	
	
	p.item_content.pc_none{
		font-size: min(4.5vw , 36px);
	}
	
}
.col_topnews .inner_news .noarticle {
	text-align: center;
}



/* --------------- top about --------------- */

.col_topabout{
	width: 100%;
	margin: 0 0 130px;
	padding: 0;
	color: #003d67;
	position: relative;
}

.col_topabout:after{
	content: "";
	width: 73%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: #003d67;
	border-bottom-right-radius: 61px;
    border-top-right-radius: 61px;
    z-index: -1;

}

.col_topabout:before{
	content: "";
	width: 45%;
	height: 76%;
	background-color: #f0f0f0;
	border-bottom-left-radius: 61px;
    border-top-left-radius: 61px;
    position: absolute;
    top: 12%;
    right: 0;
    z-index: 0;
}

.inner_about{
	width: 100%;
	max-width: 1260px;
	margin: 0 auto;
	padding: 0 0 6.5%;    
}


.inner_about:after{
	content: "";
	width: 1px;
	height: 94px;
	background-color: #000;
	position: absolute;
	top: 93%;
	left: 50%;
	display: none;
}

.boxl_about1{
	width: 80%;
	max-width: 574px;
	margin: 0 6.65% 0 0;
}


.box_about{
	max-width: 1260px;
	margin: 0 auto 0 0;
	padding: 10.5% 0 0 5.4%;
	display: flex;

}



.box_about2{
	padding: 13% 7% 12.3% 6.7%;

}

.box_about2.pc_none{
	display: none;
}

.txt_about1{
	width: 66%;
	margin: 0 auto 44px;
	color: #fff;
	font-size: min(3.25vw , 41px);
	font-weight: 700;
    text-align: center;
    position: relative;
    
}



.txt_about1 span{
	border-bottom: double 4px #fff;
    line-height: 1.8em;

}


.inner_image1{
	margin: 0 0 35px;
}

.inner_image1 img{
	width: 100%;
}

.inner_txt_about1{
	color: #fff;
	font-size: min(2.06vw , 26px);
	font-weight: 700;
	text-align: center;
	line-height: 1.38;
}

.wrap_about1{
	width: 50%;
	max-width: 280px;
	margin: 0 38px 0 0;
}

.wrap_about3{
	width: 45%;
	max-width: 256px;
	padding: 10px 0 0;
}

.img_about1{
	width: calc(44% - 73px);
	margin: 0;
	padding: 0 73px 0 0;
	text-align: right;
	position: relative;
	z-index: 0;
}

.img_about1 img{
	width: 100%;

}

.img_about1:before{
	width: 249px;
	height: 304px;
	background-image: url(../img/top/img_about1.svg);
	background-size: 249px 304px;
	position: absolute;
	bottom: 27%;
	left: 0;
	z-index: -1;
	border-radius: 25px;
	
}

.cont_about1{
	width: 100%;
	margin: 0 auto 37px;
	padding: 0;
}

.cont_about2{
	width: 100%;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: space-between;
}

.inner_image2{
	width: 95%;
	max-width: 266px;
	margin: 0 0 23px;
}

.inner_image3{
	width: 100%;
	max-width: 256px;
	margin: 0 0 23px;
}

.inner_image3 img{
	width: 100%;
	height: 100%;
}

.inner_txt_about2{
	color: #fff;
	font-size: min(1.58vw , 20px);
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
}

.col_topabout .mds_top1{
	margin: 0 0 45px;
	padding: 0;
	text-align: left;
	line-height: 1.3;
	position: relative;
	z-index: 0;
}

.box_inner_about2{
	width: 100%;
	max-width: 375px;
	position: relative;
}

.box_inner_about2 dt{
	margin: 0 0 37px;
	font-size: min(2.06vw , 26px);
	font-weight: 700;
	line-height: 1.73;
}

.box_inner_about2 dd{
	margin: 0;
	font-size: 15px;
	letter-spacing: -0.027em;
	color: #565454;
}

@media print,
screen and (max-width: 1200px) {
	.col_topabout:before{
		right: -5%;
	}
	


}



@media print,
screen and (max-width: 850px) {
	
	.col_topabout:before{
		display: none;
	}
	
	.col_topabout .mds_top1{
		text-align: center;
	}
	
	.inner_about{
		padding: 17.5% 0 111px;
	}
	
	.inner_about:after{

		top: 98%;
		display: block;
	}
	
	.box_inner_about2 dt{
		width: 100%;
        margin: 0 auto 37px;
        font-size: 40px;
	}
	
	.box_inner_about2 dd{
		width: 100%;
        margin: 0 auto;
        font-size: 20px;
	}
	
	
	.box_about{
		width: 95%;
		padding: 12.5% 0 12% 0;
		display: block;
		background-color: #003d67;
		border-bottom-right-radius: 61px;
	    border-top-right-radius: 61px;
		
	}
	
	.boxl_about1{
		width: 86%;
		max-width: 586px;
		margin: 0 auto;
	}
	
	.cont_about1{
		margin: 0 auto 44px;
	}
	
	.cont_about2{
		display: block;
	}
	
	.wrap_about1{
		width: 78%;
		max-width: 533px;
		margin: 0 auto 70px;
	}
	
	.inner_image1 img.sp_none{
		display: none;
	}
	
	.inner_image1 img.pc_none{
		display: block;
	}
	
	.inner_image2{
		width: 100%;
		max-width: 533px;
	}
	
	.wrap_about3{
		width: 78%;
		max-width: 530px;
		margin: 0 auto;
	}
	
	.inner_image3{
		width: 100%;
		max-width: 530px;
	}
	
	
	.box_about2.sp_none{
		display: none;
	}
	
	.box_about2.pc_none{
		width: 100%;
		max-width: 100%;
		display: block;
		padding: 0 0 7.2%;
	}
	
	.box_inner_about2{
		max-width: 647px;
		margin: 0 auto;
	}
	
	.col_topabout{
		background-color: #f0f0f0;
	}
	
	.txt_about1{
		font-size: 41px;
	}
	
	.inner_txt_about1{
		font-size: 26px;
	}
	
	.inner_txt_about2{
		font-size: 26px;
	}
	
	.inner_txt_about3{
		font-size: 26px;
	}
	
	

	
	
}


@media print,
screen and (max-width: 720px) {
	.col_topabout{
		margin: 0 0 16.5%;
	}
	
	.inner_about{
		width: 100%;
		padding: 17.5% 0 16%;
		background-color: #f0f0f0;

	}
	
	.inner_about:after{
		top: 98.5%;
		height: 3%;
	}
	
	.box_about1{
		display: block;
	}
	
	.cont_about1{
		width: 100%;
		margin: 0 auto 7.5%;
	}
	
	.col_topabout .mds_top1{
		margin-bottom: 13.5%;
		text-align: center;
	}
	
	.inner_about{
		padding: 16% 0 18.5%;
	}
	
	.cont_about1 dt{
		font-size: min(6vw , 52px);
		margin-bottom: 8%;
	}
	
	.cont_about1 dd{
		margin-bottom: 70px;
		letter-spacing: 0.06em;
	}
	
	.img_about1{
		width: 100%;
	}
	
	.box_inner_about2{
		max-width: 100%;
	}
	
	.box_inner_about2 dt{
		width: 90%;
		margin: 0 auto 5.5%;
		font-size: min(6.8vw , 52px);
	}
	
	.box_inner_about2 dd{
		font-size: min(4.16vw , 30px);
		width: 90%;
	}
	
	.txt_about1{
		width: 100%;
		font-size: min(7.9vw , 57px);
		margin: 0 0 8.8%;
	}
	
	.txt_about1 span:before{
	content: "";
	    width: 85.5%;
	    height: 1px;
	    background-color: #fff;
	    position: absolute;
	    top: 98%;
	    left: 7.2%;
	}
	.inner_txt_about1{
		font-size: min(6.3vw , 46px);
	}
	
	.inner_txt_about2{
		font-size: min(5.2vw , 38px);
	}
	
	.txt_about1 span{
		border-bottom: solid 1px #fff;
	}
	
	.boxl_about1{
		width: 89%;
		max-width: 598px
	}
	
	.wrap_about1{
		width: 100%;
		max-width: 537px;
		margin: 0 auto 11.5%;
	}
	
	.wrap_about3{
		width: 100%;
		max-width: 537px;
		padding: 0;
	}
	

	
	
}


/* --------------- top business --------------- */

.col_topbusiness{
	width: 100%;
	margin: 0 0 93px;
	padding: 0;
	color: #003d67;
	position: relative;
}

.col_topbusiness::after{
	content: "";
	width: 1px;
	height: 94px;
	background-color: #000;
	position: absolute;
	top: 99%;
	left: 50%;
}

.bg_business1{
	position: relative;
}

.bg_business1:after{
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	right: -2%;
	background-color: #16a2dc;
	border-bottom-left-radius: 50px;
    border-top-left-radius: 50px;
    z-index: -1;
}

.inner_business{
	width: 90%;
	max-width: 1030px;
	margin: 0 auto 60px;
	padding: 82px 0 65px;
    position: relative;
}

.inner_business::before{
	content: "";
	width: 160px;
	height: 203px;
	background-image: url(../img/top/icon_business.svg);
	background-repeat: no-repeat;
	position: absolute;
	top: -3.5%;
	left: 7%;
}



.box_business1{
	width: 100%;
}

h3.mds2{
	width: 100%;
	margin: 0;
	padding: 0;
	border-top: solid 1px #ffffff;
	border-bottom: solid 1px #ffffff;
	color: #ffffff;
	font-size: 30px;
	font-weight: 700;
	text-align: center;
}

.wrap_business{
	width: 95%;
	max-width: 976px;
	margin: 111px auto 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.wrap_business dl{
	width: 44%;
	max-width: 430px;
	margin: 0 5% 123px 0;
	position: relative;
}

.wrap_business dl:nth-of-type(2n){
	margin: 0 0 123px 6%;
}

.wrap_business dl:nth-of-type(3n){
	margin: 0 5% 0 0;
} 

.wrap_business dl:nth-of-type(4n){
	margin: 0 0 0 6%;
} 

.wrap_business dl:first-child:after{
	content: "";
	min-height: 543px;
	position: absolute;
	top: -16%;
	right: -14%;
	border-right: 1px dotted #fff;
}

.wrap_business dl:nth-of-type(3n):after{
	content: "";
	height: 118%;
	position: absolute;
	top: -16%;
	right: -14%;
	border-right: 1px dotted #fff;
}

.wrap_business dl dt{
	width: calc(94% - 26px);
	max-width: 404px;
	margin: 0 auto;
	padding: 15px 13px 110px;
	background-color: #003d67;
	border-radius: 30px;
	font-size: min(2.2vw , 28px);
	font-weight: 600;
	color: #fff;
	text-align: center;
	position: absolute;
	top: -12%;
	right: 3%;
	filter: drop-shadow(7px 7px 0px #188db5);
	line-height: 1;

}

.wrap_business dl:nth-of-type(3n) dt{
	top: -11%;
}

.wrap_business dl:last-of-type dt{
	top: -11%;
}

.wrap_business dl dt .small{
	font-size: min(1.5vw , 19px);
}

.wrap_business dl dd{
	margin: 0 0 23px;
	color: #fff;
	line-height: 1.6;
}


.beer-slider {
  display: inline-block;
  position: relative;
  overflow: hidden;
}
.beer-slider *, .beer-slider:before, .beer-slider:after,
.beer-slider *:before,
.beer-slider *:after {
  box-sizing: border-box;
}
.beer-slider img, .beer-slider svg {
  vertical-align: bottom;
}
.beer-slider > img {
  max-width: 100%;
  height: auto;
}

.beer-reveal {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 50%;
  overflow: hidden;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.35s;
  border-right: solid 2px #ffffff;
}

.beer-reveal > :first-child {
  width: 200%;
  max-width: none;
}
.beer-reveal > img:first-child {
  height: auto;
}

.beer-range {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  height: 100%;
  margin: 0;
  left: -1px;
  width: calc(100% + 2px);
  cursor: pointer;
  opacity: 0;
  -ms-touch-action: auto;
  touch-action: auto;
}
.beer-range::-webkit-slider-thumb {
  height: 300vh;
}
.beer-range::-moz-range-thumb {
  height: 300vh;
}
.beer-range::-ms-tooltip {
  display: none;
}

.beer-handle {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  color: #fff;
  background: rgba(0, 0, 0, 0.4);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: solid 2px #ffffff;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0);
  transition: background 0.3s, box-shadow 0.3s, opacity 0.5s 0.25s;
}
.beer-handle:before, .beer-handle:after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  top: 50%;
  border-top: solid 2px;
  border-left: solid 2px;
  transform-origin: 0 0;
}
.beer-handle:before {
  left: 10px;
  transform: rotate(-45deg);
}
.beer-handle:after {
  right: 0;
  transform: rotate(135deg);
}

.beer-range:focus ~ .beer-handle {
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
}

.beer-slider[data-beer-label]:after,
.beer-reveal[data-beer-label]:after {
  content: attr(data-beer-label);
  position: absolute;
  top: 1.5rem;
  line-height: 1;
  padding: 0.5rem;
  border-radius: 0.125rem;
  background: rgba(255, 255, 255, 0.75);
}

.beer-slider[data-beer-label]:after {
  right: 1.5rem;
}

.beer-reveal[data-beer-label]:after {
  left: 1.5rem;
}

.beer-slider[data-beer-label=""]:after,
.beer-reveal[data-beer-label=""]:after {
  content: none;
}

.beer-ready .beer-reveal, .beer-ready .beer-handle {
  opacity: 1;
}

.beer-slider {
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 20px;
  filter: drop-shadow(7px 7px 0px #188db5);
  margin: 0 0 5%;
}


.detail a{
	width: 170px;
	padding: 12px 0 12px 20px;
	line-height: 1.2em;
	font-size: 15px;
	text-decoration: none;
	text-align: left;
	color: #fff;
	border: solid 1px #fff;
	border-radius: 90px;
	box-sizing: border-box;
	display: inline-block;
	position: relative;
}

.detail a:after{
	content: "";
	width: 16px;
	height: 16px;
	background-image: url(../img/top/icon_business3.svg);
	background-repeat: no-repeat;
	position: absolute;
	top: 30%;
	right: 9%;
}

.detail a:hover{
	background-color: #003d67;
	color: #fff;
	border: solid 1px #003d67;
}

.detail2 a{
	width: 170px;
	padding: 12px 0 12px 20px;
	line-height: 1.2em;
	font-size: 15px;
	text-decoration: none;
	text-align: left;
	color: #fff;
	border: solid 1px #fff;
	border-radius: 90px;
	box-sizing: border-box;
	display: inline-block;
	position: relative;
}

.detail2 a:after{
	content: "";
	width: 13px;
	height: 7px;
	background-image: url(../img/top/icon_business6.svg);
	background-repeat: no-repeat;
	position: absolute;
	top: 43%;
	right: 10%;
}

.detail2 a:hover{
	background-color: #003d67;
	color: #fff;
	border: solid 1px #003d67;
}

.detail2 a.light:hover{
	background-color: #519fd5;
	color: #fff;
	border: solid 1px #519fd5;
}

.detail3 a{
	width: 170px;
	padding: 12px 0 12px 20px;
	line-height: 1.2em;
	font-size: 15px;
	text-decoration: none;
	text-align: left;
	color: #003d67;
	border: solid 1px #003d67;
	border-radius: 90px;
	box-sizing: border-box;
	display: inline-block;
	position: relative;
}

.detail3 a:after{
	content: "";
	width: 16px;
	height: 16px;
	background-image: url(../img/top/icon2_business6.svg);
	background-repeat: no-repeat;
	position: absolute;
	top: 30%;
	right: 9%;
}

.detail3 a:hover{
	background-color: #003d67;
	color: #fff;
	border: solid 1px #003d67;
}

.detail4{
	width: 100%;
	max-width: 265px;
	margin: 0 0 20px;
}

a.detail4{
	width: 100%;
	padding: 12px 20px 12px 14px;
	line-height: 1.2em;
	font-size: 15px;
	text-decoration: none;
	text-align: left;
	color: #fff;
	border: solid 1px #fff;
	border-radius: 90px;
	box-sizing: border-box;
	display: block;
	position: relative;
	font-feature-settings: "palt" 1;
}

a.detail4:after{
	content: "";
	width: 13px;
	height: 7px;
	background-image: url(../img/top/icon_business6.svg);
	background-repeat: no-repeat;
	position: absolute;
	top: 43%;
	right: 7%;
}

a.detail4:hover{
	background-color: #ff7700;
	color: #fff;
	border: solid 1px #ff7700;
}

a.detail4.pre{
	background-color: #c6c6c6;
	color: #fff;
	border: solid 1px #c6c6c6;
	cursor: not-allowed;
}


.detail5 {
	width: 100%;
	max-width: 435px;
}

.detail5 a{
	width: 100%;
	max-width: 190px;
	margin: 0 2% 20px 0;
	padding: 12px 20px 12px 14px;
	line-height: 1.2em;
	font-size: 15px;
	text-decoration: none;
	text-align: left;
	color: #fff;
	border: solid 1px #fff;
	border-radius: 90px;
	box-sizing: border-box;
	display: inline-block;
	position: relative;
	font-feature-settings: "palt" 1;
}

.detail5 a:nth-of-type(2){
	width: 100%;
	max-width: 225px;
	margin: 0;
}

.detail5 a:after{
	content: "";
	width: 13px;
	height: 7px;
	background-image: url(../img/top/icon_business6.svg);
	background-repeat: no-repeat;
	position: absolute;
	top: 43%;
	right: 7%;
}

.detail5 a:hover{
	background-color: #ff7700;
	color: #fff;
	border: solid 1px #ff7700;
}

.detail5 a.light:hover{
	background-color: #225446;
	color: #fff;
	border: solid 1px #225446;
}

.inner_business2{
	width: 96.5%;
	max-width: 1216px;
	margin: 0 auto 60px;
	padding: 82px 0 65px;
    position: relative;
}

.inner_business2::before{
	content: "";
	width: 160px;
	height: 203px;
	background-image: url(../img/top/icon_business.svg);
	background-repeat: no-repeat;
	position: absolute;
	top: -5%;
	right: 7%;
}


.bg_business2{
	position: relative;
}

.bg_business2::after{
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: -2%;
	background-color: #003d67;
	border-bottom-right-radius: 50px;
    border-top-right-radius: 50px;
    z-index: -1;
}

.box_business2{
	width: 85%;
	max-width: 1032px;
	margin: 0 auto;
	padding-bottom: 35px;
	border-bottom: dotted  1px #fff;
}

.box_business2:nth-of-type(2){
	padding: 0;
	border-bottom: none;
}

.wrap_business2{
	width: 95%;
	max-width: 948px;
	margin: 55px auto 0;
	display: flex;
	justify-content: space-between;
}

.wrap_business2.bottom{
	margin: 32px auto 0;
}

.box_image{
	width: 55%;
	max-width: 430px;
	max-height: 244px;
}

.box_image img{
	width: 100%;
	border-radius: 20px;
	filter: drop-shadow(7px 7px 0px #188db5);
}


dl.cont_business{
	width: 55%;
	margin: 0 0 0 8.5%;
}


dl.cont_business.left{
	margin: 0 8.5% 0 0;

}

dl.cont_business dt{
	font-size: 28px;
	font-weight: 600;
	color: #fff;
	line-height: 1;
	margin: 0 0 15px;
}

dt.business_title1{
	font-size: 28px;
	font-weight: 600;
	color: #fff;
	display: flex;
	align-items: center;
}

dl.cont_business dt img{
	width: 100%;
	max-width: 41px;
	margin: 0 15px 0 0;
}

dl.cont_business dd{
	margin: 0 0 33px;
	color: #fff;
}


dl.cont_business2{
	width: 58%;
	margin: 0 0 0 8.5%;
}


dl.cont_business2.left{
	margin: 0 8.5% 0 0;

}

dl.cont_business2 dt{
	font-size: 28px;
	font-weight: 600;
	color: #fff;
	line-height: 1;
	margin: 0 0 15px;
}

dl.cont_business2 dt img{
	width: 100%;
	max-width: 41px;
	margin: 0 15px 0 0;
}

dl.cont_business2 dd{
	margin: 0 0 33px;
	color: #fff;
}

.inner_business3{
	width: 96.5%;
	max-width: 1216px;
	margin: 0 auto 60px;
	padding: 82px 0 65px;
    position: relative;
}

.inner_business3::before{
	content: "";
	width: 160px;
	height: 203px;
	background-image: url(../img/top/icon_business.svg);
	background-repeat: no-repeat;
	position: absolute;
	top: -9%;
	left: 7%;
}

.bg_business3{
	position: relative;
}


.bg_business3::after{
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	right: -2%;
	background-color: #0064a5;
	border-bottom-left-radius: 50px;
    border-top-left-radius: 50px;
    z-index: -1;
}

.box_business3{
	width: 85%;
	max-width: 1032px;
	margin: 0 auto;
}

.wrap_business3{
	width: 91%;
	max-width: 948px;
	margin: 55px auto 0;
	display: flex;
	justify-content: space-between;
}

.box_image3{
	width: 55%;
	max-width: 430px;
	max-height: 244px;
}

.box_image3 img{
	width: 100%;
	border-radius: 20px;
	filter: drop-shadow(7px 7px 0px #003d67);
}

.white{
	margin: 25px 0 0;
	color: #fff;
}

.inner_business4{
	width: 96.5%;
	max-width: 1216px;
	margin: 0 auto 60px;
	padding: 82px 0 65px;
    position: relative;
}

.inner_business4::before{
	content: "";
	width: 160px;
	height: 203px;
	background-image: url(../img/top/icon_business.svg);
	background-repeat: no-repeat;
	position: absolute;
	top: -8.5%;
	right: 7%;
}

.bg_business4{
	position: relative;
}

.bg_business4::after{
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: -2%;
	background-color: #f5aa60;
	border-bottom-right-radius: 50px;
    border-top-right-radius: 50px;
    z-index: -1;
}

.box_business4{
	width: 85%;
	max-width: 1032px;
	margin: 0 auto;
}

.wrap_business4{
	width: 92%;
	max-width: 948px;
	margin: 55px auto 0;
	display: flex;
	justify-content: space-between;
}

.box_image4{
	width: 55%;
	max-width: 430px;
	max-height: 244px;
}

.box_image4 img{
	width: 100%;
	border-radius: 20px;
	filter: drop-shadow(7px 7px 0px #225446);
}


@media print,
screen and (max-width: 800px) {
	.inner_business::before{
		top: -2%;
	}
	
	dl.cont_business dt{
		font-size: 27px;
	}
	
	dl.cont_business2 dt{
		font-size: 27px;
	}

	.wrap_business{
		width: 100%;
		display: block;
		max-width: 600px;
	}
	
	.wrap_business dl{
		width: 100%;
		margin: 0 auto 25%;
	}
	
	.wrap_business dl:nth-of-type(2n){
		margin: 0 auto 25%;
	}
	
	.wrap_business dl:nth-of-type(3n){
		margin: 0 auto 25%;
	}
	
	.wrap_business dl:last-of-type{
		margin: 0 auto 0;
	}
	
	
	.detail{
		text-align: center;
	}
	
	a.detail4{
		text-align: center;
	}
	
	.detail5{
		text-align: center;
	}
	
	.wrap_business dl dt{
		font-size: 28px;
	}
	
	.wrap_business dl dt .small{
		font-size: 19px;
	}
	
	

	
	
	.wrap_business dl:after{
		content: "";
		width: 100%;
		position: absolute;
		top: 112%;
		right: 0%;
		border-bottom: 1px dotted #fff;
		border-right: none;
	}
	
	.wrap_business dl:first-child:after{
		content: "";
		width: 100%;
		min-height: 0;
		position: absolute;
		top: 110%;
		right: 0%;
		border-bottom: 1px dotted #fff;
		border-right: none;
	}
	
	.wrap_business dl:nth-of-type(3n):after{
		content: "";
		width: 100%;
		min-height: 0;
		height: 0;
		position: absolute;
		top: 110%;
		right: 0%;
		border-bottom: 1px dotted #fff;
		border-right: none;
	}
	
	.wrap_business dl:last-child:after{
		content: "";
		width: 100%;
		position: absolute;
		top: 0;
		right: 0%;
		border-bottom: none;
		border-right: none;
	}
}


@media print,
screen and (max-width: 720px) {
	h3.mds2{
		width: 91%;
		margin: 0 auto;
		font-size: 5vw;
		padding: 3.5% 0;
	}
	

	
	.wrap_business{
		display: block;
		max-width: 600px;
		margin: 23% auto 0;
	}
	
	.wrap_business dl{
		width: 100%;
		margin: 0 auto 38%;
	}
	
	.wrap_business dl:nth-of-type(3n){
		margin: 0 auto 38%;
	}
	
	.wrap_business dl:nth-of-type(2n){
		margin: 0 auto 38%;
	}
	
	.wrap_business dl:after{
		top: 110%;
	}
	
	.wrap_business dl:nth-of-type(3n):after{
		top: 110%;
	}
	
	.wrap_business dl:last-of-type{
		margin: 0 auto 10%;
	}
	
	.wrap_business dl:first-child:after{
		font-size: 2.8vw;
		top: 110%;
	}
	
		.wrap_business dl dt{
		font-size: min(5.1vw , 30px);
		top: -9%;
		right: 3%;
		border-radius: 30px;
		filter: drop-shadow(9px 9px 0px #188db5);
		line-height: 1em;

	}
	
	.wrap_business dl:nth-of-type(3n) dt{
		top: -7%;
	}
	
	.wrap_business dl:last-of-type dt{
		top: -7%;
	}
	
	
	.wrap_business dl dt .small{
		font-size: min(2.4vw , 25px);
	}
	

	.detail{
		text-align: center;
	}
	
	.detail2{
		text-align: center;
	}
	
	a.detail4{
		margin: 0 0 6.5%;
		text-align: center;
	}
	
	.detail5{
		max-width: 100%;
		text-align: center;
	}
	
	.detail5 a{
		margin: 0 0 6.5%;
	}
	
	.detail a{
		width: 74%;
		max-width: 343px;
		padding: 4.8% 15% 4.8% 9.5%;
		font-size: min(4.1vw , 30px);
	}
	
	.box_image img.right_business{
		width: 100%;
		border-radius: 20px;
		filter: drop-shadow(7px 7px 0px #188db5);
	}
	
	.box_business2{
		padding-bottom: 7.2%;
	}
	
	.detail a:after{
		width: 10%;
		max-width: 30px;
		height: 100%;
		background-size: 100%;
		background-image: url(../img/top/sp/icon_business3.png);

	}
	.detail2 a{
		width: 74%;
		max-width: 350px;
		padding: 4.8% 15% 4.8% 9.5%;
		font-size: min(4.1vw , 30px);
	}
	
	.detail2 a:after{
		width: 10%;
		max-width: 26px;
		height: 15px;
	}
	
	.detail3 a{
		width: 74%;
		max-width: 343px;
		padding: 4.8% 15% 4.8% 9.5%;
		font-size: min(4.1vw , 30px);
	}
	
	.detail3 a:after{
		width: 10%;
		max-width: 26px;
		height: 15px;
	}
	
	a.detail4{
		max-width: 100%;
	}
	
	a.detail4{
		width: 100%;
		max-width: 538px;
		padding: 4.8% 15% 4.8% 8%;
		font-size: min(4.1vw , 30px);
	}
	
	a.detail4:after{
		width: 10%;
		max-width: 26px;
		height: 15px;
	}
	
	.detail5 a{
		width: 74%;
		max-width: 391px;
		padding: 4.8% 15% 4.8% 8%;
		font-size: min(4.1vw , 30px);
	}
	
	.detail5 a:nth-of-type(2){
		width: 92%;
		max-width: 491px;
	}
	
	.detail5 a:after{
		width: 10%;
		max-width: 26px;
		height: 15px;
	}
	.wrap_business2{
		display: block;
		margin: 11% auto 0;
	}
	
	.wrap_business2:last-of-type{
		margin: 7.2% auto 0;
	}
	
	
	.col_topbusiness{
		margin: 0 0 17.5%;
	}
	
	.col_topbusiness::after{
		height: 1.4%;
		top: 99.5%;
	}
	
	.inner_business{
		width: 85%;
		margin: 0 auto 11.5%;
		padding: 9% 0 7%;
	}
	
	.inner_business::before{
		width: 19%;
		height: 169px;
		top: -0.8%;
	}
	
	.inner_business2{
		width: 100%;
		max-width: 685px;
		margin: 0 auto 11.5% 0;
		padding: 11.5% 0 9%;
	}
	
	.inner_business2::before{
		width: 19%;
		height: 169px;
		top: -1.5%;
		right: 11%;
	}
	
	
	
	.inner_business3{
		width: 100%;
		max-width: 685px;
		margin: 0 auto 11.5% 0;
		padding: 11.5% 0 9%;
	}
	
	.inner_business3::before{
		width: 19%;
		height: 169px;
		top: -3%;
		left: 11%;
	}
	
	.inner_business4{
		width: 100%;
		max-width: 685px;
		margin: 0 auto 11.5% 0;
		padding: 11.5% 0 13%;
	}
	
	.inner_business4::before{
		width: 19%;
		height: 169px;
		top: -3%;
		right: 11%;
	}
	
	.box_image{
		width: 100%;
		max-width: 580px;
		max-height: 329px;
		margin-bottom: 10%;
	}
	
	dl.cont_business{
		width: 100%;
		margin: 0;
	}
	
	dl.cont_business dt{
		font-size: min(5vw , 36px);
	}
	
	dl.cont_business dd{
		font-size: min(4.1vw , 30px);
	}
	
	dl.cont_business2{
		width: 100%;
		margin: 0;
	}
	
	dl.cont_business2 dt{
		font-size: min(5vw , 36px);
	}
	
	dl.cont_business2 dd{
		font-size: min(4.1vw , 30px);
	}
	
	.wrap_business dl dd{
		font-size: min(4.5vw , 30px);
		
	}
	
	
	.white{
		font-size: 3vw;
	}
	
	.wrap_business3{
		display: block;
		margin: 11% auto 0;
	}
	
	.box_image3{
		width: 100%;
		max-width: 580px;
		max-height: 329px;
		margin-bottom: 10%;
	}
	
	.wrap_business4{
		display: block;
		margin: 11% auto 0;
	}
	
	.box_image4{
		width: 100%;
		max-width: 580px;
		max-height: 329px;
		margin-bottom: 10%;
	}
	

}

@media print,
screen and (max-width: 600px) {
	.wrap_business dl dt .small{
		font-size: min(3.1vw , 26px);
	}
	
	.wrap_business dl:nth-of-type(3n) dt{
		top: -8.5%;
	}
	
	.wrap_business dl:last-of-type dt{
		top: -8.5%;
	}
}


@media print,
screen and (max-width: 550px) {
	.detail a{
		width: 65%;
	}
	
	.detail2 a{
		width: 65%;
	}
	
	.detail3 a{
		width: 65%;
	}

}

@media print,
screen and (max-width: 410px) {
	.wrap_business dl dt .small{
		font-size: min(3.7vw , 26px);
	}
	
	.wrap_business dl:nth-of-type(3n) dt{
		top: -8.8%;
	}
	
	.wrap_business dl:last-of-type dt{
		top: -8.8%;
	}
}



@media print, screen and (max-width: 470px) and (min-width: 401px){
	.wrap_business dl dt{
		top: -10%;
		line-height: 1em;
	}
	
}

@media print,
screen and (max-width: 400px) {
	.wrap_business dl:after{
		top: 106%;
	}
	
	.wrap_business dl:first-child:after{
		top: 106%;
	}
	
	.wrap_business dl:nth-of-type(3n):after{
		top: 106%;
	}
	.wrap_business dl dt{
		top: -10%;
	}
	

}




/* --------------- top company --------------- */

.col_topcompany{
	width: 100%;
	margin: 0 0 93px;
	padding: 0;
	color: #003d67;
}

.inner_company{
	width: 76%;
	max-width: 964px;
	margin: 0 auto;
	padding: 0;
}

.wrap_company{
	margin: 0 auto;
	padding: 0;
	display: flex;
}

.list_company1{
	width: 50%;
	max-width: 454px;
	margin: 0 55px 0 0;
	color: #565454;
}

.list_company1 dl{
	margin: 0;
	display: flex;
}

.list_company1 dl dt{
	width: 30%;
	padding: 25px 12px 25px 0;
	font-size: 15px;
	border-top: solid 1px #003d67;
	text-align: right;
	line-height: 1em;
}

.list_company1 dl:last-child dt{
	border-bottom: solid 1px #003d67;
	padding: 25px 12px 74px 0;
}

.list_company1 dl dd{
	width: 70%;
	margin: 0 0 0 16px;
	padding: 25px 0 25px 17px;
	border-top: solid 1px #bacbd6;
	line-height: 1.6em;
}

.list_company1 dl:last-child dd{
	border-bottom: solid 1px #bacbd6;
	padding: 25px 0 26px 17px;
	line-height: 1.6em;
}

.list_company2{
	width: 50%;
	max-width: 454px;
	margin: 0 auto;
}

.list_company2 dl{
	margin: 0;
	display: flex;
}

.list_company2 dl dt{
	width: 30%;
	padding: 25px 10px 25px 0;
	font-size: 15px;
	border-top: solid 1px #003d67;
	text-align: right;
	line-height: 1.6em;
	color: #565454;
}

.list_company2 dl:last-child dt{
	border-bottom: solid 1px #003d67;
}

.list_company2 dl dd{
	width: 80%;
	margin: 0 0 0 16px;
	padding: 25px 0 25px 17px;
	border-top: solid 1px #bacbd6;
	line-height: 1em;
	color: #565454;
}

.list_company2 dl:last-child dd{
	border-bottom: solid 1px #bacbd6;
}


.list_company2 dl dd .list_company3{
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
}

.list_company2 dl dd .list_company3 li{
	width: 50%;
	margin: 0 0 10px 0;
}

@media print,
screen and (max-width: 1250px) {
	.list_company2 dl dd .list_company3 li{
		width: 100%;
	}
	
}


@media print,
screen and (max-width: 800px) {
	.wrap_company{
		display: block;
	}
	
	.inner_company{
		width: 100%;
	}
	
	.list_company1{
		width: 100%;
		max-width: 100%;
	}
	

	
	.list_company2{
		width: 100%;
		max-width: 100%;
	}
	

	
	.list_company2 dl:first-child dt{
		border-top: transparent;
	}
	
	.list_company2 dl dt{
		width: 35%;	
	}
	
	.list_company2 dl:first-child dd{
		width: 80%;
		border-top: transparent;
	}
	
	
	
	.col_topcompany{
		margin: 0 0 65px;
	}
	
	.list_company2 dl dd{
		line-height: 1.6;
	}
	
	.list_company2 dl dd .list_company3 li{
		width: 34%;
	}
	
	
	
}

@media print,
screen and (max-width: 570px) {
	.list_company2 dl dd .list_company3 li{
		width: 100%;
	}
}


/* --------------- top contact --------------- */

.col_topcontact{
	width: 100%;
	margin: 0;
	padding: 67px 0 75px;
	background-color: #f0f0f0;
	color: #003d67;
	position: relative;
	z-index: 0;
}

.txt_contact1{
	margin: 48px 0 0;
	color: #565454;
}


.inner_contact{
	width: 90%;
	max-width: 1058px;
	margin: 0 auto;
	padding: 0;
}

.box_contact1{
	width: 100%;
}

.wrap_contact{
	width: 100%;
	margin: 111px auto 0;
	display: flex;

}

.wrap_contact dl{
	width: calc(100% / 3);
	max-height: 100%;
	margin: 0 23px 123px 0;
	padding: 5.2% 3% 4.8%;
	position: relative;
	background-color: #fff;
	border-radius: 30px;
	text-align: center;
}

.wrap_contact dl:last-child{
	margin: 0 0 123px 0;
	padding: 3.4% 3% 4.8%;
}

.wrap_contact dl dt{
	width: calc(94% - 74px);
	max-width: 300px;
	margin: 0 auto;
	padding: 8px 30px 110px;
	background-color: #003d67;
	border-radius: 29px;
	font-size: min(2.2vw , 28px);
	font-weight: 600;
	color: #fff;
	text-align: center;
	position: absolute;
	top: -17%;
	right: 5%;
	z-index: -1;
	line-height: 1em;
}

.wrap_contact dl dd{
	margin: 0;
	color: #003d67;
	line-height: 1.5;
	font-feature-settings: "palt" 1;
}

.wrap_contact dl dd .big{
	font-family: Akshar;
	font-size: min(3.6vw , 39px);
	font-weight: 600;
}

.wrap_contact dl:last-child dd{
	margin: 0 0 25px;
}

.img_contact1{
	width: 25%;
	max-width: 43px;
	margin: 0 auto 20px;
}

.img_contact1 img{
	width: 100%;
}

a.btn_contact1{
	width: 70%;
	max-width: 154px;
    min-height: 60px;
    padding: 8px 46px;
    text-align: center;
    text-decoration: none;
    border: solid 1px #003d67;
    box-sizing: border-box;
    border-radius: 36px;
    color: #003d67;
}

a.btn_contact1:hover{
	opacity: 0.8;
}

.col_contact {
	width: 100%;
	background-color: #fff;
	padding: 80px 0 130px;
	color: #565454;
	border-radius: 47px;
	position: relative;
}

.bg_txtcontact{
	width: 84%;
	max-width: 906px;
	margin: 0 auto;
	padding: 18px 30px 110px;
	background-color: #003d67;
	border-radius: 28px;
	font-size: 28px;
	font-weight: 600;
	color: #fff;
	text-align: center;
	position: absolute;
	top: -3%;
	left: 4.3%;
	z-index: -1;
	line-height: 1;
}

.col_tbl_contact{
	width: 78%;
	max-width: 1058px;
	margin: 0 auto;
	padding: 0;
}

.col_tbl_contact dl{
	width: 100%;
	margin: 0;
	padding: 0;
	display: flex;
}

.col_tbl_contact dl dt{
	width: 27%;
	max-width: 224px;
	margin: 0 10px 0 0;
	padding: 27px 0 27px 10px;
	box-sizing: border-box;
	border-top: solid 1px #003d67;
}

.col_tbl_contact dl dd{
	width: 100%;
	max-width: 591px;
	margin: 0;
	padding: 27px 0 27px 20px;
	box-sizing: border-box;
	border-top: solid 1px #bacbd6;
}

.hobby-selection{
	width: 100%;
	margin: 0;
}

.hobby-selection:first-of-type{
	margin: 5px 0 0;
}

.postcode.hankaku {
	width: 64%;
	margin: 0;
	padding: 0 0 5px;
}
.postcode.hankaku span.wpcf7-form-control-wrap { padding-left: 8px; }
.postcode.hankaku input { width: calc( 100% - 30px ); }
label{
	margin: 0;
	padding: 0;
}

.address{
	width: 100%;
	max-width: 458px;
}

.col_tbl_contact dl dd input.box_address{
	width: 100%;
	max-width: 458px;
}

.col_tbl_contact dl dd input[type="text"],
.col_tbl_contact dl dd input[type="tel"],
.col_tbl_contact dl dd input[type="email"] {
	max-width: 310px;
	height: 48px;
	margin: 0 0 3px;
	padding: 0.2em;
	line-height: 1.7;
	box-sizing: border-box;
	background-color: #f0f0f0;
	border: solid 1px #f0f0f0;
	border-radius: 5px;
}

.col_tbl_contact dl dd input[type="text"]{
	height: 48px;	
}

.col_tbl_contact dl dd input.radio{
	height: auto;
	margin: 0;
	padding: 0.2em;
	line-height: 0em;
	box-sizing: border-box;
}

.col_tbl_contact dl dd input.post{
	margin: 0 0 3px 17px;
}

.col_tbl_contact dl dd textarea{
	background-color: #f0f0f0;
	border: solid 1px #f0f0f0;
	border-radius: 5px;
	width: 80%;
	margin: 0 auto;
	min-height: 194px;
}


ul.innner_listcontact{
	width: 100%;
	margin: 0;
	padding: 0;
}

ul.innner_listcontact li{
	margin: 0 0 30px;
}
ul.innner_listcontact li:last-child { margin-bottom: 0; }

.innner_listcontact li .wpcf7-list-item {
	margin: 0;
	display: block;
}
.innner_listcontact li .wpcf7-list-item label {
	display: flex;
	align-items: center;
}
.innner_listcontact li span.wpcf7-not-valid-tip { display: none; }
.innner_listcontact li:last-child span.wpcf7-not-valid-tip {
	padding: 15px 0 0;
	display: block;
}


.txt_contact2{
	width: 100%;
	margin: 0 0 75px;
	padding: 0;
	text-align: center;
	color: #565454;
	line-height: 2.2;
}

.cont_notice_contact{
	margin: 0 0 40px;
	padding: 0;
}

.box_contact2{
	width: 100%;
	max-width: 655px;
	height: 160px;
	margin: 0 auto;
	padding: 22px;
	border: solid 1px #c5c6c6;
    box-sizing: border-box;
    overflow: auto;
    font-weight: 500;
}

.consent{
	width: 100%;
    margin: 0 auto 35px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn_contact{
	width: 100%;
	margin: 0 auto;
	padding: 0 0 30px;
	text-align: center;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	position: relative;
	z-index: 0;
}

.btn_contact input {
	width: 100%;
	max-width: 311px;
	margin: 10px;
	padding: 20px 0;
	color: #fff;
	font-size: 18px;
	background-color: #16a2dc;
	border-radius: 50px;
	border: none;
	cursor: pointer;
}
.btn_contact input:hover { opacity: 0.8; }
.btn_contact .wpcf7-spinner {
	margin: 0 auto;
	position: absolute;
	bottom: 0;
}
.btn_contact .wpcf7-spinner::before { left: calc( 50% - 2px ); }


.label_sub{
	max-width: 55px;
	margin: 10px 0 0 0;
    background-color: #16a2dc;
    text-align: center;
    border-radius: 50px;
    font-size: 13px;
    color: #fff;
}


@media print,
screen and (max-width: 850px) {
	.col_topcontact{
		padding: 18% 0 17%;
	}
	
	.inner_contact{
		width: 90%;
	}
	
	.wrap_contact{
		display: block;
		margin: 25% auto 0;
	}
	
	.img_contact1{
		width: 15%;
		max-width: 90px;
	}
	
	
	.wrap_contact dl{
		width: auto;
		max-height: 100%;
		margin: 0 auto 19%;
		padding: 8.5% 6% 7.5%;
	}
	
	.wrap_contact dl:last-child{
		margin: 0 0 21%;
		padding: 5.5% 3% 8.6%;
	}
	
	.wrap_contact dl dt{
		max-width: 600px;
		font-size: 5vw;
		top: -22%;
		right: 4.5%;
		padding: 16px 30px 110px;
	}
	
	.wrap_contact dl:last-child dt{
		top: -22%;
	}
	
	.wrap_contact dl dd{
		font-size: min(4.1vw , 30px);
	}
	
	.wrap_contact dl dd .big{
		font-size: min(10vw , 79px);
	}
	
	.bg_txtcontact{
		width: calc(94% - 74px);
		max-width: 600px;
		left: 5%;
		font-size: 5vw;
		top: -2.3%;
	}
	
	.col_tbl_contact{
		width: 92%;
	}
	
	.col_tbl_contact dl dd input.radio{
		width: 4%;
	}
	
	.col_tbl_contact dl{
		display: block;
		padding: 0 0 10px;
	}
	
	.col_tbl_contact dl dt{
		width: 100%;
		max-width:595px;
		margin: 0 10px 10px 0;
		padding: 0;
		border-top: none;
		display: flex;
		align-items: center;
		flex-direction: row-reverse;
        	justify-content: start;
	}

	.col_tbl_contact dl dd textarea{
		width: 98%;
		height: 388px;
	}
	
	.label_sub{
		width: 100%;
		margin: 0 2% 2px 0;
	}
	
	.hobby-selection{
		width: 100%;
		text-indent: -20px;
		padding: 0 0 0 20px;
		
	}
	
	.col_tbl_contact dl dd{
		padding: 20px 5px;
	}
	
	.col_tbl_contact dl dd input[type="text"],
	.col_tbl_contact dl dd input[type="tel"],
	.col_tbl_contact dl dd input[type="email"] {
		width: 100%;
		max-width: 590px;
	}
	.col_tbl_contact dl dd .postcode.hankaku input { width: calc( 100% - 30px ); }
	
	.btn_contact{
		width: 100%;
	}
	
	.btn_contact input{
		border-radius: 25px;
		padding: 3% 0;
	}
	
	.txt_contact1{
		font-size: min(4.1vw , 30px);
	}
	
	.txt_contact2{
		width: 92%;
		margin: 0 auto 5%;
		line-height: 1.6;
	}
	
	a.btn_contact1{
		border-radius: 10px;
		max-width: 303px;
	}
	
	div#mw_wp_form_mw-wp-form-82{
		padding: 13% 0 10%;
	}
	
}

@media print, screen and (max-width: 720px) and (min-width: 470px){
	
	.col_contact {
		padding: 8vw 0;
	}
	
	.wrap_contact dl dt{
		top: -22%;
		right: 4.5%;
	}
	
	.wrap_contact dl:last-child dt{
		top: -22%;
	}
	
	.bg_txtcontact{
		top: -2.8%;
	}

}


/* --------------- contact-confirm --------------- */

.col_topcontact.confirm { padding-top: 120px; }
.col_topcontact.confirm .mds_top1 { margin-bottom: 50px; }
.btn_contact input.wpcf7-previous { background-color: #999; }



/* --------------- contact-thanks --------------- */

.col_topcontact.thanks .txt_contact2 { margin: 0; }

a.btn_top_contact {
	width: 90%;
	max-width: 250px;
	margin: 80px auto 0;
	padding: 0.7em 0;
	color: #fff;
	font-size: 16px;
	font-weight: 500;
	text-decoration: none;
	background-color: #003d67;
	border-radius: 50px;
	display: block;
}
a.btn_top_contact:hover { opacity: 0.8; }