@charset "UTF-8";
/* CSS Document */

/*-------------------------
 
  header

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

#index_header{
	width: 100%;
	height: 100vh;
	position: relative;
	left: 0;
	top: 0;
}
#index_header:before{
	content: '';
    background: url(../img/header_chara.png) no-repeat center / contain;
    width: 35%;
	height: 50%;
    position: absolute;
    top: 25%;
    right: 0%;
    z-index: 1;
}
@media (min-width:430px) and (max-width:570px){
	#index_header:before{
		width: 50%;
	}
}
@media (min-width:570px) and  (max-width:999px){
	#index_header:before{
		height: 60%;
		width: 40%;
	}
}
@media (min-width:1000px){
	#index_header:before{
		height: 100%;
	}
}
@media (min-width:1000px) and (max-width:1300px){
	#index_header:before{
		top: 30%
	}
}
@media (min-width:1500px){
	#index_header:before{
		width: 30%;
		height: 100%;
	}
}
.header_text{
	position: absolute;
	padding: 0 5%;
	bottom: 3%;
	width: 100%;
}
.header_text h1{
	font-weight: bold;
	font-size: clamp(1.7rem, 1.167rem + 2.67vw, 4.5rem);
	line-height: 1.4;
	color: #fff;
	text-shadow: 1px 1px 10px #2a4022;
	letter-spacing: 5px;
}
.header_text h1 span{
	background: #000;
	color: #fff;
	font-weight: bold;
	display: inline-block;
	line-height: 1;
	padding: .3em 0;
	font-size: 1.2em;
	text-shadow: none
}
.header_text p{
	font-weight: bold;
	color: #fff;
	line-height: 1.8;
	margin: 1em auto;
	font-size: clamp(0.8rem, 0.686rem + 0.57vw, 1.4rem);
	text-shadow: 1px 1px 10px #2a4022;
}
.header_text .btn_cta{
	margin: 1em 0;
}
.header_text aside{
	background: #000;
	color: #fff;
	font-size: clamp(0.8rem, 0.762rem + 0.19vw, 1rem);
	padding: .5em;
	text-align: center;
	line-height: 1.8;
	display: inline-block;
}
@media (max-width:999px){
	#index_header{
		background: url("../img/header_sp.jpg")no-repeat top / cover;
		margin-top: 65px;
		height: calc(100vh - 65px)
	}
	.header_text aside{
		width: 100%
	}
}
@media (min-width:1000px){
	#index_header{
		background: url("../img/header.jpg")no-repeat center / cover;
	}
}
@media (min-width:1000px) and (max-width:1500px){
	.header_text a{
		position: absolute;
		right: 2%;
		bottom: 2%;
		max-width: 400px;
		z-index: 1
	}
}






/*-------------------------
 
  message

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

#message{
	background: #59993D;
	background: linear-gradient(180deg, rgba(89, 153, 61, 1) 0%, rgba(255, 255, 255, 0.5) 100%);
	position: relative;
	overflow: hidden;
	padding-bottom: 5em;
}

#message:before,
#message:after{
	content: '';
	background: url("../img/message_bg.png")no-repeat center / cover;
	width: 20%;
	height: 20%;
	display: block;
	position: absolute;
	z-index: -1
}
#message:before{
	top: 60%;
	left: 0;
}
#message:after{
	top: 30%;
	right: 0;
}

.message_liner_wrap{
	overflow: hidden;
	height: 100%;
	widows: 100%;
	display: block	
}
/* バナー内コンテンツ */
.message_liner {
  display: inline-block;
  color: rgba(255,255,255,.5);
  padding-left: 100%;
  white-space: nowrap;
  animation: animate-banner 60s linear infinite;
	font-size: clamp(2rem, 0.476rem + 7.62vw, 10rem);
	font-weight: lighter;
}
/* 横にスクロールさせるアニメーション */
@keyframes animate-banner {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(-100%);
  }
}

.message_wrap{
	background: #fff;
	padding: 4em 1em;
	border-radius: 10px;
	text-align: center;
	position: relative;
}
.message_wrap p{
	line-height: 2.5;
	font-weight: bold;
	margin: 3em auto;
	font-size: clamp(0.8rem, 0.691rem + 0.55vw, 1.1rem);
	border-bottom: solid 1px #ccc;
	padding-bottom: 3em;
}
@media (max-width:767px){
	.message_wrap p{
		text-align: left;
		font-weight: normal;
	}
}
.message_wrap span{
	font-weight: bold;
	display: block;
	font-size: clamp(1rem, 0.636rem + 1.82vw, 2rem)
}


#message_img1{
	position: absolute;
	top: -4%;
	left: -5%;
	width: 35%;
	height: auto;
}
#message_img3{
	position: absolute;
    top: -4%;
    right: 0;
    width: 33%;
}
@media (max-width:999px){
	.message_img_wrap{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: flex-start;
		margin-top: 1em
	}
	#message_img2,
	#message_img4{
		width: 46%;
	}
	#message_img4{
		margin-top: 3em;
	}
}
@media (min-width:480px){
	#message_img1{
		width: 30%;
	}
	#message_img3{
		width: 28%;
	}
}
@media (min-width:1000px){
	#message_img1{
		top: -5%;
		left: -3%;
	}
	#message_img2{
		position: absolute;
		top: 20%;
		right: -5%;
		width: 18%;
	}
	#message_img3{
		top: 60%;
        right: 0%;
        width: 20%;
	}
	#message_img4{
		top: 65%;
        left: -3%;
        position: absolute;
        width: 15%;
	}
}
@media (min-width:1200px){
	#message_img2{
		width: 20%;
		right: -2%
	}
	#message_img4{
		top: 70%;
		left: -2%;
		width: 18%
	}
}
@media (min-width:1200px){
	#message_img2{
		width: 20%;
		right: -2%
	}
	#message_img4{
		top: 70%;
		left: -2%;
		width: 18%
	}
}

/*-------------------------
 
  #nayami

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

#nayami{
	margin: 3em auto;
	position: relative
}
#nayami:before{
	content: '';
	background: url("../img/bg1.png")no-repeat center / contain;
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
}
#nayami:before{
	bottom: 0;
	left: 0;
}
#nayami:after{
	bottom: 50%;
	left: 50%;
}
#nayami .title1{
	margin: 3em auto
}
#nayami .title1 p{
	font-weight: bold;
	font-size: 1.1em;
}

.nayami_wrap{
	margin: 5em auto;
	max-width: 1000px;
}
.nayami_list{
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	column-gap: 10px;
	margin-bottom: 2em;
	position: relative
}
.nayami_ic{
	width: 80px;
	height: 80px;
	border-radius: 50%;
	overflow: hidden;
	background: #fff;
}
.nayami_ic img{
	width: 100%;
	height: 100%;
	object-fit: contain;
	vertical-align: bottom
}

.nayami_text{
	position: relative;
	background: var(--main-color);
	color: #fff;
	font-size: clamp(0.9rem, 0.791rem + 0.55vw, 1.2rem);
	text-align: center;
	border-radius: 3em;
	padding: .8em 1em;
	width: calc(100% - 90px);
	line-height: 1.2
}
.nayami_text:before{
	content: '';
	background: url("../img/fukidashi_parts.png")no-repeat left bottom / contain;
	display: block;
	position: absolute;
	bottom: -12px;
	width: 30px;
	height: 30px;
}

@media (max-width:499px){
	.nayami_list:nth-child(even){
		flex-direction: row-reverse;
	}
	.nayami_list:nth-child(odd) .nayami_text:before{
		left: -3px;
	}
	.nayami_list:nth-child(even) .nayami_text:before{
		transform: scaleX(-1);
		right: 0;
	}
}

@media (min-width:500px){
	.nayami_ic{
		width: 120px;
		height: 120px;
	}
	.nayami_list:nth-child(even){
		padding-left: 50%;
	}
	.nayami_text:before{
		left: -3px
	}
	.nayami_text{
		width: calc(100% - 130px);
		max-width: 450px;
	}
}


/*-------------------------
 
  #support

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

#support{
	margin: 5em auto;
}

.support_list_wrap{
	margin: 3em auto;
	column-gap: 10px
}
.support_list{
	width: 100%;
	margin-bottom: 2em;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	border: solid 1px var(--main-color);
	border-radius: 50px;
	padding: 2em;
}

@media (min-width:768px){
	.support_list{
		width: calc((100% / 3) - 10px);
		padding: 1em;
		border-radius: 30px;
	}
}
@media (min-width:1000px){
	.support_list_wrap{
		gap:20px
	}
	.support_list{
		width: calc((100% / 3) - 20px);
		padding: 2em
	}
}

.contact_sub{
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.contact_sub:before,
.contact_sub:after{
	content: '';
	background: url("../img/contact_subparts.png")no-repeat top / contain;
	width: 30px;
	height: 120px;
	position: relative;
}
.contact_sub:after{
	transform: scaleX(-1);
}
.contact_sub p{
	font-weight: bold;
	font-size: clamp(1rem, 0.818rem + 0.91vw, 1.5rem);
	text-align: center;
}

@media (min-width:1000px){
	.contact_sub:before,
	.contact_sub:after{
		width: 100px
	}
	.contact_sub p{
		padding: 0 1em
	}
}

/*-------------------------
 
  contact parts

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

.contact_parts div{
	position: relative;
	border: solid 1.5px var(--cta-color);
	padding: 2em;
	text-align: center;
	border-radius: 20px;
	margin: 1em auto 3em;
	max-width: 1200px;
}
.contact_parts div:before,
.contact_parts div:after{
	content: '';
	background-size: contain;
	background-repeat: no-repeat;
	background-position: bottom;
	display: block;
	position: absolute;
}
.contact_parts div:before{
	left: -8%;
    bottom: -25%;
    width: 95px;
    height: 180px;
	background-image: url("../img/contact_chara1.png")
}
.contact_parts div:after{
	right: -14%;
    bottom: -30%;
    width: 140px;
    height: 270px;
	background-image: url("../img/contact_chara2.png")
}
@media (min-width:500px){
	.contact_parts div:before{
		left: -5%;
		bottom: -25%;
		width: 100px;
		height: 180px;
	}
	.contact_parts div:after{
		right: -6%;
		bottom: -30%;
		width: 140px;
		height: 270px;
	}
}
@media (min-width:768px){
	.contact_parts div:before{
		width: 160px;
		height: 210px;
	}
	.contact_parts div:after{
		width: 200px;
        height: 360px;
	}
}
@media (min-width:1000px){
	.contact_parts div:before{
		left: 1%;
		bottom: -.5em;
		width: 170px;
		height: 280px;
	}
	.contact_parts div:after{
		right: -5%;
		bottom: -5%;
		width: 300px;
		height: 450px;
	}
}


.contact_parts h2{
	font-weight: bold;
	font-size: clamp(1.8rem, 1.364rem + 2.18vw, 3rem);
	color: var(--cta-color);
	margin-bottom: .5em;
}
.contact_parts p{
	line-height: 2;
	font-size: clamp(1rem, 0.964rem + 0.18vw, 1.1rem)
}

.contact_parts .btn1{
	background: var(--cta-color);
	padding: 1.1em;
	margin: 1em auto;
	font-weight: bold;
	font-size: clamp(1rem, 0.964rem + 0.18vw, 1.1rem)
}

@media (min-width:1000px){
	.contact_parts .btn1{
		padding: 2em
	}
}




/*-------------------------
 
  features

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

#features{
	padding: 80px 0;
	position: relative;
	margin: 150px auto;
}
#features .title1{
	position: relative;
}
#features .title1:after{
	content: '';
    background: url(../img/chara3.png) no-repeat center / contain;
    width: 150px;
    height: 230px;
    display: block;
    position: absolute;
    right: -52px;
    top: -97px;
    z-index: 0;
}
#features .title1 h2{
	position: relative;
	z-index: 1
}
.features_en{
	font-size: clamp(6rem, 4.286rem + 8.57vw, 15rem);
    position: absolute;
    top: -2%;
    left: 0;
    color: var(--main-color);
    line-height: 1;
    opacity: .1;
}

@media (min-width:480px){
	#features .title1:after{
		width: 200px;
		height: 300px;
	}
}
@media (min-width:768px){
	#features .title1:after{
		width: 350px;
		height: 380px;
	}
}

@media (min-width:787px) and (max-width:999px){
	#features br.sp-none{
		display: none
	}
}

@media (min-width:1000px){
	#features{
		padding: 100px 0;
		margin: 300px auto
	}
	.features_en{
		top: -4%
	}
	#features .title1:after{
		width: 350px;
    	height: 430px;
	}
}
@media (min-width:1400px){
	#features .title1:after{
    	height: 500px;
	}
}
@media (min-width:1700px){
	#features .title1:after{
		width: 400px;
    	height: 555px;
	}
}
.features_list_wrap{
	margin: 3em auto;
	max-width: 1200px
}

.features_list{
	margin: 80px auto;
	align-items: center;
	
}
.features_list > *{
	width: 100%;
	margin-bottom: 1em;
}
@media (min-width:768px){
	.features_list{
		column-gap: 20px
	}
	.features_list > *{
		width: calc(50% - 20px)
	}
	.features_list:nth-child(2){
		flex-direction: row-reverse
	}
}
@media (min-width:1000px){
	.features_list{
		column-gap: 50px
	}
	.features_list > *{
		width: calc(50% - 50px)
	}
}
.features_img{
	position: relative;
}
.features_img span{
	position: absolute;
	left: 10px;
	top: -50px;
	font-size: 10em;
	color: var(--main-color);
	line-height: 1;
	display: block;
}
.features_img img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	vertical-align: bottom
}

.feature_text h3{
	font-size: clamp(1.3rem, 0.864rem + 2.18vw, 2.5rem);
	line-height: 1.6;
	margin-bottom: 1em;
	font-weight: bold;
}

/*-------------------------
 
  skill

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

#skill{position: relative}
#skill:before{
	content: '';
    width: 260px;
    height: 300px;
    position: absolute;
    top: -200px;
    left: -14%;
    background: url(../img/chara5.png) no-repeat center / contain;
    display: block;
    z-index: 0;  
}
@media (min-width:480px){
	#skill:before {
		width: 270px;
		height: 330px;
		left: -10%;
	}
}
@media (min-width:768px){
	#skill:before {
		width: 310px;
		height: 350px;
		top: -139px;
		left: -7%;
	}
}
@media (min-width:1000px){
	#skill:before{
		width: 340px;
        height: 380px;
        top: -139px;
        left: 0;
	}
}
@media (min-width:1400px){
	#skill:before{
		width: 450px;
		height: 450px;
		top: -200px;
	}
}

.skill_list_wrap{
	gap:20px
}
.skill_list{
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	justify-content: flex-start;
	width: 100%;
	margin-bottom: 3em
}
@media (min-width:768px){
	.skill_list{
		width: calc(50% - 20px)
	}
}
@media (min-width:768px){
	.skill_list{
		width: calc((100% / 3) - 20px)
	}
}
.skill_img{
	aspect-ratio : 3 / 2;
	overflow: hidden;
	margin-bottom: 1em;
}
.skill_text h4{
	font-weight: bold;
	font-size: 1.5em;
	padding: .3em .5em;
	border-left: solid 5px var(--main-color);
	margin-bottom: .5em
}
.skill_text p{
	line-height: 2
}

.soft_info{
	margin-top: 1em;
}

.soft_info p{
	color: var(--main-color);
	font-weight: bold;
	margin-bottom: .3em
}
.soft_info ul{
	justify-content: flex-start;
	gap:10px;
}
.soft_info li{
	background: var(--main-color);
	padding: .5em;
	line-height: 1;
	color: #fff;
	border-radius: 5px;
	font-size: 14px;
}

/*-------------------------
 
  gallery

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

#gallery{
	position: relative;
    padding: 5em 0;
    margin: 6em auto;
}
.gallery_wrap{
	gap:20px;
	margin: 5em auto;
}
.gallery_wrap_large a{
	display: block;
	transition: .2s;
	color: #000
}
.gallery_wrap_large figure{
	aspect-ratio:16 / 9;
	overflow: hidden;
	position: relative;
	transition: .2s
}
.gallery_wrap_large figure:before{
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.3);
	transition: .2s
}

.gallery_wrap_large figure:after{
	content: '\ea9d';
	font-family: icomoon;
	color: red;
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50% , -50%);
	font-size: 3rem;
}

.gallery_wrap_large img{
	transition: .2s
}
.gallery_wrap_large a:hover figure:before{
	background: none!important;
	transition: .2s
}
.gallery_wrap_large a:hover img{
	transform: scale(1.1);
	transition: .2s;
}




.gallery_other figure{
	aspect-ratio : 1 / 1;
	overflow: hidden;
	box-shadow: 0 3px 3px #ccc;
}

.gallery_list img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	vertical-align: bottom
}
.gallery_list{
	width: 100%;
	margin: 1em auto;
}

@media (min-width:768px){
	.gallery_list{
		width: calc(50% - 20px)
	}
}
@media (min-width:1000px){
	.gallery_wrap_medium .gallery_list{
		width: calc((100% / 4) - 20px)
	}
}

.gallery_name{
	margin-top: 1em
}

.gallery_name p{
	font-weight: bold;
	font-size: 1.2rem
}
.gallery_name span{
	font-size: .8em;
	color: var(--main-color);
	display: block;
}

.gallery_wrap_large a{
	display: block
}



/*-------------------------
 
  prof

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

.prof_list{
	width: 100%;
	margin: 0 auto;
    padding: 2em 1em;
}
.prof_list div{
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap:30px;
	max-width: 800px;
}
.prof_list h3{
	font-weight: bold;
	font-size: clamp(1.6rem, 1.333rem + 1.33vw, 2.5rem);
	line-height: 1.6;
}
.prof_list p{
	line-height: 1.8;
	font-size: clamp(1rem, 0.97rem + 0.15vw, 1.1rem);
}

#prof1{
	background: url("../img/prof1.jpg")no-repeat center / cover;
}
#prof2{
	background: url("../img/prof2.jpg")no-repeat center / cover;
}
@media (max-width:768px){
	.prof_list h3 br{
		display: none
	}
}
@media (min-width:1000px){
	.prof_list{
		width: 50%;
		padding: 2em;
	}
	.prof_list div{
		gap:40px
	}
}
@media (min-width:1400px){
	.prof_list{
		padding: 5em 2em;
	}
}





/*-------------------------
 
  carrier

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


#carrier{
	margin: 50px auto;
}

#carrier .title1{
	margin: 5em auto;
}
#carrier .bg_wrap{
	position: relative;
	background: #F2F7EF;
	background: linear-gradient(180deg, rgba(242, 247, 239, 1) 0%, rgba(255, 255, 255, 0.5) 100%);
	padding: 5em 0
}
#carrier .bg_wrap:before{
	content: '';
	width: 50%;
	height: 500px;
	display: block;
	background: url("../img/logoic.png")no-repeat bottom right / contain;
	position: absolute;
	bottom: 99.9%;
	right: 0;
	z-index: -1
}
@media (min-width:1000px){
	#carrier{
		margin: 300px auto 50px
	}
	#carrier .bg_wrap:before{
		width: 40%
	}
}

.carrier_wrap{
	gap:20px;
}

.carrier_list{
	width: 100%;
	margin-bottom: 1em;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap:10px
}
.carrier_list h3{
	font-weight: bold;
	font-size: clamp(1rem, 0.891rem + 0.55vw, 1.3rem);
	margin-bottom: .5em;
}
.carrier_list p{
	font-size: clamp(0.875rem, 0.852rem + 0.11vw, 0.938rem);
}
@media (max-width:667px){
	.carrier_list figure{
		width: 120px;
	}
	.carrier_list div{
		width: calc(100% - 130px)
	}
}
@media (min-width:668px){
	.carrier_list{
		flex-direction: column;
		width: calc(50% - 20px);
		justify-content: flex-start
	}
	.carrier_list h3{
		margin: 1em auto
	}
}
@media (min-width:1000px){
	.carrier_wrap{
		gap:50px
	}
	.carrier_list{
		flex-direction: column;
		width: calc(25% - 50px)
	}
	.carrier_list h3{
		text-align: center;
	}
}

.carrier_message{
	text-align: center;
	padding: 50px 0;
	position: relative;
}

.carrier_message:after{
	content: '';
    width: 50%;
    height: 100%;
    background: url(../img/chara2.png) no-repeat bottom / contain;
    display: block;
    position: absolute;
    bottom: -60%;
    right: 0;  
}

@media (min-width:768px){
	.carrier_message:after{
		width: 40%;
		bottom: -65%
	}
}
@media (min-width:1000px){
	.carrier_message:after{
		width: 280px;
    	height: 400px;
		right: -10%;
		top: 50%;
		transform: translateY(-50%);
		z-index: 0
	}
}
.carrier_message h3{
	font-size:clamp(1.3rem, 0.682rem + 3.09vw, 3rem);
	line-height: 1.6;
	font-weight: bold;
	position: relative;
	z-index: 1
}
.carrier_message h3 span{
	font-size: 1em;
	font-weight: bold;
	display: block
}

.carrier_message p{
	font-weight: bold;
	font-size: clamp(1rem, 0.818rem + 0.91vw, 1.5rem);
	margin: 1em auto;
	position: relative;
	z-index: 1
}


/*-------------------------
 
  flow

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

#flow{
	margin: 120px auto;
	position: relative;
}

.flow_title{
	margin-bottom: 150px
}
.flow_title span{
	font-size: 15em;
	line-height: 1;
	color: var(--main-color);
	opacity: .3;
	display: block;
	z-index: -1;
	position: absolute;
	top: -50px;
	left: 50%;
	transform: translateX(-50%)
}

.flow_title h2{
	font-weight: bold;
	font-size: clamp(2rem, 1.636rem + 1.82vw, 3rem);
	text-align: center;
	line-height: 100px
}

.flow_list_wrap{
	position: relative
}
.flow_list_wrap:after{
	content: '';
	background: url("../img/chara6.png")no-repeat center / contain;
	width: 200px;
	height: 400px;
	display: block;
	position: absolute;
	right: -10%;
	top: 96%;
	z-index: 1
}

.flow_list{
	background: #fff;
    border-radius: 30px;
    padding: 1em;
    box-shadow: 0 3px 6px #e0e3de;
    margin-bottom: 3em;
}

.flow_list > *{
	width: 100%;
	margin: 1em auto
}
.flow_list_title{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	flex-direction: column;
}
.flow_list_title span{
	font-weight: bold;
	display: block;
	line-height: 1;
	margin-bottom: 1em;
}
.flow_list_title h4{
	font-weight: bold;
	font-size: clamp(1.5rem, 1.318rem + 0.91vw, 2rem);
}
.flow_list p{
	display: flex;
	align-items: center;
}
@media (min-width:768px){
	.flow_list{
		padding: 2em;
	}
	.flow_list_title{
		width: 25%;
	}
	.flow_list p{
		width: 75%;
	}
	.flow_list p:before{
		content: '';
		width: 1px;
		height: 120px;
		display: block;
		margin-right: 50px;
		background: #ccc;
	}
}

@media (min-width:1000px){
	.flow_list_wrap:after{
		width: 400px;
		height: 800px;
		right: -10%;
		bottom: 0;
		top: inherit
	}
}




@media (max-width:999px){
	#carrier + .contact_parts{
		margin-top: 8em
	}
}


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

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

#about{
	margin: 8em auto;
}
.about_img{
	gap:30px
}
.about_img div{
	width: 100%;
	margin-bottom: 1em;
}
@media(min-width:768px){
	.about_img div{
		width:calc(50% - 30px)
	}
}

.table_wrap{
	margin: 5em auto;
}
.table_wrap dl{
	border-bottom: solid 1px #ccc;
}
.table_wrap dl >*{
	width: 100%;
	padding: 1em;
	line-height: 1.8;
}
.table_wrap dt{
	font-weight: bold;
	color: var(--main-color);
}
@media (max-width:767px){
	.table_wrap dt{
		padding-bottom: 0;
	}
}
@media (min-width:768px){
	.table_wrap dl >*{
		padding: 1.5em;
	}
	.table_wrap dt{
		width: 20%!important;
	}
	.table_wrap dd{
		width: 80%!important
	}
}

.access_title{
	background: var(--main-color);
	color: #fff;
	font-weight: bold;
	font-size: 1.5em;
	padding: 1em;
	border-radius: 10px;
	margin: 1em auto;
	text-align: center;
}

.access_wrap{
	gap:20px;
	margin-bottom: 3em;
}
.access_wrap dl{
	width: 100%;
}
@media (min-width:768px){
	.access_wrap dl{
		width: calc(50% - 20px);
	}
}
.access_wrap dt{
	font-weight: bold;
	font-size: 1.2em;
	color: var(--main-color);
	margin-bottom: 1em;
}
.access_wrap dd{
	line-height: 2;
}

#about .btn_wrap{
	margin: 3em auto;
}
#about .btn1{
	background: #fff;
	border: solid 1px var(--main-color);
	color: var(--main-color);
	max-width: 350px;
	padding: 1.5em;
	font-weight: bold;
	transition: all .2s
}
#about .btn1:hover{
	background: var(--main-color);
	color: #fff;
	transition: all .2s
}


/*-------------------------
 
  information

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

#information{
	margin: 5em auto;
	position: relative
}

#information .flow_title{
	margin: 5em auto
}

#information .flow_title span{
	opacity: .1;
	left: 0;
	transform: translateX(0)
}
#information .flow_title h2{
	text-align: left;
}

#information .btn1{
	background: var(--main-color);
	color: #fff;
	font-weight: bold;
	max-width: 350px;
	padding: 1.5em;
}