@charset "UTF-8";

/* ============================================================
  Variables
============================================================ */
/* ============================================================
  Break Point
============================================================ */
.only-pc {
	display: block !important;
}

.only-sp {
	display: none !important;
}

.only-pc--inline {
	display: inline !important;
}

@media only screen and (max-width: 1024px) {

	.only-pc,
	.only-pc--inline {
		display: none !important;
	}

	.only-sp {
		display: block !important;
	}
}

/* ============================================================
  Font Family
============================================================ */
/* ============================================================
  Font Size
============================================================ */
@media only screen and (max-width: 1024px) {
	body {
		font-size: 0.875em;
	}
}

large {
	font-size: 1.375em;
}

@media only screen and (max-width: 1024px) {
	large {
		font-size: 1em;
	}
}

/* ============================================================
  Color
============================================================ */
/* ============================================================
  その他
============================================================ */
.header-image {
	background: #fff url(/img/kyousei/kyousei-header-img.jpg) no-repeat center top;
	background-size: cover;
	height: 300px;
}

@media only screen and (max-width: 1024px) {
	.header-image {
		background: #fff url(/img/kyousei/kyousei-header-img-sp.jpg) no-repeat center top;
		height: 155px;
	}
}


main>section>h1.ttl {
	font-size: 2.25em;
	margin-top: 2em;
    margin-bottom: 0.5em;
}

@media only screen and (min-width: 1025px) {
	main>section>h2.ttl {
		font-size: 2.25em;
	}
}

@media only screen and (max-width: 1024px) {
	main>section>h2.ttl {
		font-size: 1.57em;
	}
}


/*-----アンカー-------*/
.ancList{
	background-color: #368076;
}

.ancList ul {
	padding: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px 32px;
}

@media only screen and (max-width:1024px) {
  .ancList ul {
    padding: 3px;
      display: flex;
      flex-wrap: wrap;
      gap: 1px 8px;
  }
}

.ancList ul li {
    position: relative;
}

.ancList ul li a{
    color: #fff;
	padding-left: 16px;
    position: relative;
}
@media only screen and (max-width:1024px) {
  .ancList ul li a {
    color: #fff;
    padding-left: 16px;
    position: relative;
    font-size: 10px;
  }
}

.ancList ul li a:hover {
	text-decoration: underline;
}

.ancList ul li a::before {
	content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    rotate: 45deg;
    top: .8em;
    left: 0;
}
@media only screen and (max-width:1024px) {
  .ancList ul li a::before {
      content: "";
      position: absolute;
      width: 6px;
      height: 6px;
      border-right: 2px solid currentColor;
      border-bottom: 2px solid currentColor;
      rotate: 45deg;
      top: .8em;
      left: 0;
  }
}





/*-----メインコンテンツ-------*/


.two-matching {
    margin-top: 0;
	padding: 0;
}

main>section>h1.ttl {
	font-size: 2.25em;
	margin-top: 0em;
}


.comparison-matching{
    text-align: center;
}

.two-matching-image{
    width: 90%; 
    height: auto; 
	margin-top: 40px;
	margin-bottom: 40px;
    padding: 0.5em;
}


@media only screen and (max-width: 1024px) {
	.two-matching-image {
		width: 100% ;
	}
}

.button-section {
    display: flex;
    justify-content: center;
    gap: 200px;
    margin-bottom: 2em;
}

@media only screen and (max-width:1024px) {
	#cptwo-button {
        display: flex !important;
        flex-direction: column !important;
		gap: 5px;
        font-size: 0.85em
	}
}


main .btn.-white {
	-webkit-box-align: center;
	-ms-flex-align: center;
	background-color: #fff;
	border: 1px solid #707070;
	border-radius: 10em;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	padding: 1em 3em;
	margin-top: 1em;
	width: 100%;
}





main .btn.-white:after {
	color: #333;
	content: "\e901";
	float: right;
	font-family: "icomoon";
	font-size: 1em;
	margin-bottom: 0.1em
}

@media only screen and (max-width:1024px) {
	main .btn.-white:after {
		font-size: 0.9em
	}
}

main .btn.-white:hover {
	background-color: #368076;
	color: #fff
}

main .btn.-white:hover:after {
	color: #fff
}


@media only screen and (min-width:1024px) {
	main .btn.-white {
      -webkit-box-align: center;
	 -ms-flex-align: center;
	 -webkit-box-pack: center;
	 -ms-flex-pack: center;
	 padding: 0.1em 3em;
	 margin-top: 1em;
	 width: 100%;
    }
}


@media only screen and (max-width:1024px) {
	main .btn.-white:after {
		font-size: 0.9em
	}
}


@media only screen and (max-width:1024px) {
    main .btn.-white:hover{
    background-color: #368076;
	color: #fff
   }
}


@media only screen and (max-width:1024px) {
	main .btn.-white {
        display: flex;
        flex-direction: column;
		font-size: 1.3em;
		max-width: calc(100% - 2em);
		min-height: 50px;
		min-width: calc(100% - 2em);
		padding: 0.7em 1em;
	}
}



.two-matching-content{
    margin-bottom: 40px;
    padding: 0em 18em ;
}

@media only screen and (max-width:1024px) {
	.two-matching-content { 
	 padding: 0 3em ;
	}
}

.two-matching .explanation {
	list-style-type: square;
	position: relative;
	margin-top: 15px;
}