@charset "utf-8";

@media screen and (max-width: 840px) {
  * {
    box-sizing: border-box;
  }

  html,
  body {
    min-width: 0;
  }

  body {
    font-size: 3.7vw;
  }

  img {
    max-width: 100%;
    height: auto;
  }


  .pc{display: none;}
  .sp{display: block;}

  .contents {
    width: 90%;
  }

  .site-header {
    height: 60px;
  }

  .header-inner {
    padding: 0 5%;
  }

  .header-logo {
    width: 58px;
  }

  .header-logo span {
    height: 35px;
  }

  .menu-button {
    width: 54px;
    gap: 8px;
  }

  .drawer-menu {
    width: min(86vw, 530px);
    padding: 20vw 10vw 10vw;
  }

  .drawer-menu ul li {
    padding-left: 0;
    margin-bottom: 7vw;
  }

  .drawer-menu ul li a {
    font-size: 4.3vw;
  }

  .drawer-menu ul li a span {
    margin-bottom: 1vw;
    font-size: 8vw;
  }

  .drawer-menu p a {
    font-size: 3.7vw;
  }

  .fixed-join {
    width: 38px;
    height: 260px;
    padding: 20px 0 28px 14px;
		background: #1EA7B9!important;
  }


.fixed-join-ja {
  position: absolute;
  left: -10px;
  bottom: 100%;
  width: 260px;
  padding: 0 10px 20px 10px;
	text-align: center;
}

  .fixed-join-en {
  	display: none!important;
  }

  .mv {
    height: 220vh;
  }

  .mv-sticky {
    min-height: 0;
  }

  .mv-logo {
    top: var(--logo-top, 50%);
    width: 58vw;
  }

  .mv-copy {
    top: 55%;
    width: 80vw;
  }

  .mv-copy h1 {
    margin-bottom: 6vw;
		padding-top: 6vw;
    font-size: 8vw;
    line-height: 1.35;
    letter-spacing: 1px;
  }

  .mv-copy p {
    font-size: 3.4vw;
    line-height: 1.9;
    letter-spacing: 1px;
  }

  .mv_info{
	height: 250px;
	margin-top: 60px;
	background: url("../img/mv.jpg") no-repeat center bottom / cover;
    font-family: "Saira Condensed", sans-serif;
	place-content: center;
	letter-spacing: 4px;
  }

  .mv_info h1{
	font-size: 60px;
	color: #FFF;
	text-align: center;
  }
	
	.path{
		width: 90%;
		font-size: 3.0vw;
	}

  /*.scroll-sign {
    left: 4vw;
    bottom: 8vw;
  }*/

  .about-action,
  .departments,
  .partners,
  .membership,
  .contact,
  .join-visual {
    padding: 20vw 0;
  }

  .about-action {
    padding-bottom: 28vw;
  }

  .about-action::after {
    height: 18vw;
  }

  .intro-grid,
  .stats-grid,
  .scenario-grid,
  .department-grid,
  .mission-cards,
  .price-grid,
  .price-btn,
  .initiative-grid,
  .initiative-grid article,
  .footer-info,
  .footer-left,
  .footer-right,
  .footer-copy {
    display: block;
  }

  .intro-grid {
    margin-bottom: 16vw;
  }

  .section-logo {
  	width: 75%;
    margin-bottom: 10vw;
    overflow: hidden;
  }

  .section-logo span {
    font-size: clamp(44px, 12vw, 52px);
    line-height: 1.05;
    letter-spacing: 1px;
  }

  .intro-text h2,
  .membership h3 {
    font-size: 4.8vw;
    line-height: 1.6;
    overflow-wrap: anywhere;
    word-break: break-all;
  }

  .intro-text p,
  .section-lead,
  .partner-list dd,
  .project-body p,
  .initiative-grid p,
  .department-text p {
    font-size: 3.6vw;
    line-height: 1.9;
    letter-spacing: 1px;
    overflow-wrap: anywhere;
  }

  .big-title,
  .section-title {
    margin-bottom: 10vw;
    font-size: 15vw;
    text-align: left;
  }

  .mission {
    padding: 22vw 0;
  }

  .mission-cards article,
  .scenario-grid article,
  .department-grid article,
  .price-grid article,
  .initiative-grid article {
    margin-bottom: 7vw;
  }

  .stats-grid {
    margin-bottom: 18vw;
  }

  .stats-grid dl {
    min-height: 0;
    margin-bottom: 4vw;
    padding: 8vw 0;
    border-radius: 8px;
  }

  .stats-grid dt {
    font-size: 13vw;
  }

  .stats-grid dt span {
    font-size: 4vw;
  }

  .stats-grid dd {
    margin-top: 3vw;
    font-size: 3.7vw;
  }

  .scenario-block {
    margin-bottom: 18vw;
  }

  .overview-kicker {
    margin-bottom: 3vw;
    font-size: clamp(30px, 9vw, 40px);
    line-height: 1;
  }

  .scenario-block h2 {
    margin-bottom: 10vw;
    font-size: clamp(18px, 5vw, 22px);
    line-height: 1.55;
    letter-spacing: 1px;
    overflow-wrap: anywhere;
    word-break: break-all;
  }

  .scenario-grid article {
    min-height: 0;
    padding: 7vw 8vw;
  }

  .scenario-grid h3 {
    width: 44vw;
    height: 11vw;
    margin: 0 auto 7vw;
    font-size: 4vw;
  }

  .scenario-icon {
    width: 24vw;
    height: 24vw;
    margin-bottom: 7vw;
  }

  .scenario-icon img {
    width: auto;
	height: 8vw;
  }

  .scenario-grid p {
    font-size: 3.6vw;
    line-height: 1.8;
  }

  .information-block {
    padding-top: 4vw;
  }

  .information-block h2 {
    margin: 0 0 8vw;
    width: auto;
    font-size: 13vw;
    text-align: left;
  }

  .information-block h2::after {
    width: 30vw;
    margin-top: 4vw;
  }

  .information-block ul {
    width: 100%;
  }

  .information-block li {
    display: block;
    height: auto;
    min-height: 22vw;
    margin-bottom: 5vw;
    padding: 5vw 7vw;
    border-radius: 6vw;
  }

  .information-block time {
    display: inline-block;
    margin-right: 3vw;
    font-size: 4.2vw;
  }

  .information-block li span {
    font-size: 3vw;
  }

  .information-block li span::after,
  .information-block li::after {
    display: none;
  }

  .information-block li a {
    display: block;
    margin-top: 4vw;
    font-size: 3.7vw;
    line-height: 1.8;
  }

.information-block li:after{
	position: absolute;
	width: 14vw;
	height: 2vw;
	top: 8vw;
	left: 65vw;
	background: url("../img/icon_info_link.png") no-repeat center / contain;
	content: "";
	display: block;
	visibility: hidden;
	transition: .3s;
}

.information-block li:hover:after{
	left: 70vw;
	visibility: visible;
	display: block;
}

  .information-block a {
    font-size: 3.7vw;
  }
	
  .info-more {
    width: 100%;
    height: 16vw;
    margin: 8vw 0 0;
    font-size: 3.7vw;
  }
  
  .information-block.contents {
	width: 90%;
	margin: 12vw auto;
	padding: 0;
  }

  .entry{
		width: 95%;
		margin: 0 5% 16vw auto;	
	}

	.entry ul li,
	.entry ol li {
		min-height: auto;
	}

	.entry table th,
	.entry table td{
		padding: 0.5em;
	}
	
	.btn{
		width: 70%;
		padding: 4vw;
		border-radius: 8vw;
		font-size: 3.7vw;
	}

  .sup-action {
    padding: 18vw 0 0 0;
  }

  .action-heading {
    display: block;
    margin-bottom: 12vw;
  }

  .action-heading h2,
  .initiatives h2 {
    font-size: 15vw;
  }

  .action-heading h2::after {
    width: 28vw;
    margin: 5vw 0 0 22vw;
  }

  .action-heading p:last-child {
    margin-top: 6vw;
    font-size: 4vw;
    line-height: 1.8;
  }

  .project-feature {
    margin-bottom: 16vw;
    padding-left: 0;
  }

  .project-slider {
    width: 100%;
	padding-top: 10vw;
  }

  .project-card {
    display: block;
  }

  .project-body {
  	width: 90vw;
    min-height: 0;
    padding: 18vw 7vw 8vw;
    border-radius: 0 8px 0 0;
  }

  .project-body span {
    left: 7vw;
    top: -10vw;
    font-size: 22vw;
	z-index: 2;
  }

  .project-body h3 {
    font-size: 5vw;
  }

  .project-card figure {
    height: 62vw;
    border-radius: 0 8px 8px 8px;
  }

  .project-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0 8px 8px 8px;
  }

  .motion-label,
  .project-arrow {
    /*display: none;*/
  }

  .project-progress {
    margin-top: 8vw;
  }

  .project-progress span {
    width: 34vw;
  }

  .initiatives {
    padding-top: 4vw;
  }

  .initiatives > h2 {
    font-size: 9vw;
  }

  .initiatives > p {
    margin-bottom: 8vw;
    font-size: 4vw;
  }

  .initiative-grid article {
    min-height: 0;
    padding: 7vw;
  }

  .initiative-icon {
    width: 18vw;
    height: 18vw;
    margin: 0 auto 5vw auto;
  }

  .initiative-grid h3,
  .mission-cards h3,
  .department-text h3 {
    font-size: 5vw;
  }

  .partners .section-title,
  .contact .section-title,
  .membership .section-title,
  .membership h3 {
    text-align: left;
  }

  .partners .section-lead,
  .membership .section-lead,
  .contact .section-lead {
    margin-bottom: 12vw;
    text-align: left;
  }

  .partners{
  	margin-bottom: 0;
  }
  
  .partner-list{
  	padding: 8vw;
  }
  .partner-list dt {
    margin-bottom: 5vw;
    padding: 3vw;
  }

  .partner-list dl {
    margin-bottom: 10vw;
  }
	
	.partner-list dd ul {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: 6vw;
	}

	.partner-list dd ul li a{
		min-height: 20vw;
		padding: 2vw 3vw;
		font-size: 3.0vw;
	}

	.partner-list dd ul li img{
		max-height: 20vw;
	}

  .membership{
  	padding: 0 0 30vw 0;
  }
  
  .membership::before {
    height: 36vw;
  }

  .membership img {
    position: relative;
	top: 0;
    width: 100%;
    margin-bottom: 12vw;
    border-radius: 8px;
	z-index: 1;
  }
  
  .membership .section-title {
  	width: 90vw;
	margin-left: auto;
	margin-right: auto;
  }

  .membership .contents {
    width: 88%;
    padding: 10vw 6vw;
  }
  
  .price-grid {
    padding: 8vw 8vw 0 8vw;
	margin-bottom: 8vw;
  }
  
  .price-grid article {
    padding: 0;
  }

  .price strong {
    font-size: 8vw;
  }

  .price-grid ul {
    margin-top: 6vw;
  }

  .price-grid ul li {
    margin-left: 5vw;
  }

  .price-btn {
    padding: 0;
    margin-bottom: 10vw;
  }

  .price-btn a {
    margin-bottom: 4vw;
    padding: 4vw;
    border-radius: 8vw;
  }

  .benefits {
    overflow-x: auto;
  }

  .benefits table {
    min-width: 720px;
  }

  .benefits th,
  .benefits td {
    padding: 4vw;
    font-size: 3.4vw;
  }

  .benefits th {
    font-size: 4vw;
  }

  .benefits td.note {
    padding-left: 4vw;
  }

  .membership-flow {
    margin-top: 10vw;
  }

  .flow-toggle {
    min-height: 18vw;
    padding: 0 6vw;
    font-size: 4.3vw;
  }

  .flow-toggle-icon {
    width: 7vw;
    height: 7vw;
  }

  .flow-toggle-icon::before,
  .flow-toggle-icon::after {
    width: 5.5vw;
  }

  .membership-flow.is-open .flow-panel {
    max-height: 150vw;
  }

  .flow-list {
    padding: 0 0 8vw;
  }

  .flow-list li {
    display: block;
    min-height: 0;
    padding: 6vw 0;
  }

  .flow-list li:last-child::after {
	display: none;
  }

  .flow-label {
  	top: 0;
	bottom: 0;
    width: 12vw;
    height: 12vw;
    margin: auto 0;
    border-radius: 6vw;
    font-size: 3.0vw;
  }

  .flow-list p {
  	padding: 0 4vw 0 22vw;
    font-size: 3.8vw;
    line-height: 1.8;
  }

  .contact form {
    width: 100%;
    padding: 10vw 6vw;
  }

  .contact label {
    display: block;
    margin-bottom: 7vw;
  }

  .contact input,
  .contact textarea {
    margin-top: 3vw;
    padding: 4vw;
  }

  .form-error {
    margin-top: 2vw;
    font-size: 3.3vw;
  }

  .privacy,
  .contact .check {
    margin-left: 0;
  }

  .contact .check {
    align-items: center;
  }

  .contact .check input {
    width: 8vw;
    height: 8vw;
    margin-top: 0;
  }

  .contact button {
    width: 76vw;
    height: 14vw;
    border-radius: 7vw;
  }

  .join-visual h2 {
    font-size: 15vw;
  }

  .join-visual a {
    width: 82vw;
    height: 18vw;
    border-radius: 9vw;
  }

  .footer-info {
    padding: 10vw 6vw;
  background: url("../img/bg_access_sp.png") no-repeat center / cover;
  }

  .footer-left,
  .footer-right {
    gap: 6vw;
  }

  .footer-logo {
  	width: 30vw;
    margin: 0 auto 6vw auto;
  }

  address {
    font-size: 3.4vw;
  }

  address .mail,
  address .tel {
    font-size: 4.6vw;
  }

  .footer-right {
    margin-top: 20vw;
  }

  .footer-right h2 {
    font-size: 8vw;
  }

  .footer-right p {
    font-size: 4vw;
  }

  .footer-right a {
    display: block;
    width: 30vw;
    margin: 6vw auto 0 auto;
  }

  .footer-copy {
    padding: 7vw 6vw;
    font-size: 3vw;
  }

  .footer-copy span {
    display: block;
    margin-bottom: 3vw;
  }
}