@charset "UTF-8";

/* app
----------------------------------------------- */

.app-link{margin-bottom: 12vw}
.app-link li{background:#e9f4f3;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;align-items:flex-start;-webkit-flex-wrap:wrap;flex-wrap:wrap;padding: 5vw;margin-bottom: 5vw;}
.app-link li .qr-code{width: 30%}
.app-link li .text{width: 65%;}
.app-link li .btn{width: 60%}

.app-link li p{margin-bottom: 3vw;line-height: 1.4;}
.app-link li .ttl{font-weight: 600;font-size: 115%;line-height: 1;border-left:5px solid #64c0ae;color:#64c0ae;border-bottom:1px solid #ccc;padding: 1vw 0 2vw 3vw;}

.about{margin-bottom: 8vw}
.about p{text-align: center;}
.about .ttl{font-weight: 600;font-size: 120%;padding: 6vw 0;border-bottom: 1px solid #ccc;border-top: 1px solid #ccc;}


.flow{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-justify-content:space-between;justify-content:space-between;-webkit-flex-wrap:wrap;flex-wrap:wrap;row-gap:3vw;}
.flow li{width: 48%;padding: 3vw;border: 1px solid #979797}
.flow li img{margin-bottom: 3vw;width: 100%;}
.flow li p{line-height: 1.4;text-align: justify;margin-bottom: 0;}
.flow li .ttl{font-weight: 600;margin-bottom: 2vw;line-height: 1;}

.tab-wrap {display: flex;flex-wrap: wrap;margin:20px 0;}
.tab-wrap:after {content: '';width: 100%;height: 3px;background: var(--green02);display: block;order: -1;}
.tab-label {color:var(--green02);background: var(--green01);font-weight: bold;white-space: nowrap;text-align: center;padding: 4vw 0;order: -1;position: relative;z-index: 1;cursor: pointer;border-radius: 8px 8px 0 0;flex: 1;}
.tab-label {margin: 0 1vw 1vw;}
.tab-content {width: 100%;height: 0;overflow: hidden;opacity: 0;}
.tab-switch:checked+.tab-label {background: var(--green02);color: #fff;}
.tab-switch:checked+.tab-label+.tab-content { height: auto; overflow: auto; opacity: 1; transition: .5s opacity; margin: 40px auto 0;}
.tab-switch { display: none;}




/* =============================================
pc-size 
================================================*/
@media screen and (min-width: 736px) { 
	
.app-link{margin-bottom: 80px;}
.app-link{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-justify-content:space-between;justify-content:space-between;-webkit-flex-wrap:wrap;flex-wrap:wrap;}
.app-link li{width: 48%;padding: 35px;margin-bottom: 0;}
.app-link li p{margin-bottom: 15px;}
.app-link li .ttl{padding: 5px 0 10px 15px}
	
	
.flow{-webkit-justify-content:flex-start;justify-content:flex-start;gap: 15px;}
.flow li{width: 32%;padding: 20px;}
.flow li img{margin-bottom: 10px;}
.flow li .ttl{margin-bottom:8px;}
	
.about{margin-bottom:80px}
.about a{width: 250px;}
.about .ttl{padding: 10px 0;}
	
.tab-wrap {display: flex;flex-wrap: wrap;margin:20px 0;}
.tab-wrap:after {content: '';width: 100%;height: 3px;background: var(--green02);display: block;order: -1;}
.tab-label {background: var(--green01);font-weight: bold;white-space: nowrap;text-align: center;padding: 20px 0 16px;order: -1;position: relative;z-index: 1;cursor: pointer;border-radius: 5px 5px 0 0;flex: 1;margin: 0;}
.tab-label:not(:last-of-type) { margin-right: 5px;}
.tab-content {width: 100%;height: 0;overflow: hidden;opacity: 0;}
.tab-switch:checked+.tab-label { background: var(--green02);color: #fff;}
.tab-switch:checked+.tab-label+.tab-content { height: auto; overflow: auto; opacity: 1; transition: .5s opacity; margin: 40px auto;}
.tab-switch { display: none;}
	
}

@media screen and (min-width: 1200px) {
	
.flow li{width: 24%;}

	
@media screen and (min-width: 1000px) {
	
.flow li{width: 24%;}


}