@charset "UTF-8";
html {
	position: relative;
	scroll-behavior: smooth;
	scroll-padding-top: 100px; /* 固定ヘッダの高さ分 */
}
.fix_navi {
	width: 100vw;
  	margin-left: calc(50% - 50vw);
  	margin-right: calc(50% - 50vw);
	background: rgba(0,0,0,1.00);
	padding: 50px 0;
}
@media only screen and (min-width: 767px) {
	.fix_navi {
		padding: 110px 0;
	}
}
/*anchor-link_fix*/
.fix_area {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  color: rgba(255, 255, 255, 1);
  background: rgba(0, 0, 0, 0.8);
  z-index: 5;
}
.fix_area ul {
    display: flex;
    justify-content: center;
	gap: 10px;
	max-width: 1000px;
	margin: 0 auto 0;
	padding: 10px 0;
}
.fix_area ul li {
	position: relative;
	display: block;
	width: 105px; /*100%*/
	font-size: clamp(12px, 2vw, 18px);
	line-height: 1.2;
	background: linear-gradient(to bottom right, #ffc0cb, #A9C9FF);
	/*background: rgba(0, 0, 0, 0.8);*/
	height: 80px;
}
.fix_area li:first-of-type {
	background: linear-gradient(to bottom right, rgba(88,95,176,1.00), rgba(153,156,193,1.00));
}
.fix_area li:nth-of-type(2) {
	background: linear-gradient(to bottom right, rgba(191,91,95,1.00), rgba(214,167,191,1.00));
}
.fix_area li:last-of-type {
	background: linear-gradient(to bottom right, rgba(53,136,116,1.00), rgba(165,198,189,1.00));
}

.fix_area li:first-of-type a {
	background: linear-gradient(to bottom right, #1A1B25, #212227);
}
.fix_area li:nth-of-type(2) a {
	background: linear-gradient(to bottom right, #251A1B, #272224);
}
.fix_area li:last-of-type a {
	background: linear-gradient(to bottom right, #152223, #1E2526);
}

.fix_area li:first-of-type a:hover {
	background: linear-gradient(to bottom right, rgba(88,95,176,1.00), rgba(153,156,193,1.00));
}
.fix_area li:nth-of-type(2) a:hover {
	background: linear-gradient(to bottom right, rgba(191,91,95,1.00), rgba(214,167,191,1.00));
}
.fix_area li:last-of-type a:hover {
	background: linear-gradient(to bottom right, rgba(53,136,116,1.00), rgba(165,198,189,1.00));
}

.fix_area ul li a {
	display: flex;
	justify-content: center;
	align-items: center;
	height: calc(100% - 4px);
	width: calc(100% - 4px);
	text-align: center;
	position: absolute;
	background: transparent;
	top: 2px;
    left: 2px;
}
.fix_area ul li a::after {
	display: block;
	content: "\02228";
	transform: scale(1, 0.5);
	color: rgba(255, 255, 255, 1);
	font-size: clamp(16px, 3vw, 32px);
	font-weight: bold;
	position: absolute;
    right: initial;
	bottom: 0;
	/*margin-left: calc(100% - 50%);*/
}
.fix_area ul li a:hover {
	color: rgba(255, 255, 255, 0.7);
	text-decoration: none;
}
@media only screen and (min-width: 767px) {
	.fix_area ul {
		gap: 40px;
	}
	.fix_area ul li {
		width: 280px; /*calc(100% / 4)*/
		height: 90px;
	}
	.fix_area ul li a::after {
    	right: 10%;
		bottom: initial;
	}
}

.fix_area.fixBox {
  position: fixed;
  top: 0;
  left: 0;/**/
  transition: all 500ms 0s ease;
}

.fix_area .fixBox ul li {
    padding: 0;
	background: rgba(0, 0, 0, 0.8);
	height: 80px;
	position: relative;
}
@media only screen and (min-width: 767px) {
	.fix_area.fixBox {
		top: 0;
	}
	.fix_area.fixBox ul li {
		height: 90px;
	}
}

/*navi change-color*/
.fix_area li {
	clip-path: polygon(10% 0, 90% 0, 100% 10%, 100% 90%, 90% 100%, 10% 100%, 0 90%, 0 10%);
}
.fix_area li a {
	transition: all .4s ease;
	clip-path: polygon(10% 0, 90% 0, 100% 10%, 100% 90%, 90% 100%, 10% 100%, 0 90%, 0 10%);
}
@media only screen and (min-width: 767px) {
	.fix_area li {
		clip-path: polygon(10% 0, 90% 0, 100% 30%, 100% 70%, 90% 100%, 10% 100%, 0 70%, 0 30%);
	}
	.fix_area li a {
		clip-path: polygon(10% 0, 90% 0, 100% 30%, 100% 70%, 90% 100%, 10% 100%, 0 70%, 0 30%);
	}
}

.fix_area li:first-of-type a.is-current{
	background: linear-gradient(to bottom right, rgba(88,95,176,1.00), rgba(153,156,193,1.00));
}
.fix_area li:nth-of-type(2) a.is-current{
	background: linear-gradient(to bottom right, rgba(191,91,95,1.00), rgba(214,167,191,1.00));
}
.fix_area li:last-of-type a.is-current{
	background: linear-gradient(to bottom right, rgba(53,136,116,1.00), rgba(165,198,189,1.00));
}


.c5-h--bg_1 {
	width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
	background-image: url(../images/title_pu_sp.jpg);
    background-size: cover;
	background-position: center right;
	display: block;
    font-size: clamp(23px, 3vw, 32px);
	text-shadow: 0 0 4px rgba(54,71,79,.5);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 2.1px;
    color: rgba(255, 255, 255, 1);
    /*text-align: center;*/
	padding: 22px 0 18px;
}
.c5-h--bg_2 {
	width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
	background-image: url(../images/title_pk_sp.jpg);
    background-size: cover;
	background-position: center right;
	display: block;
    font-size: clamp(23px, 3vw, 32px);
	text-shadow: 0 0 4px rgba(54,71,79,.5);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 2.1px;
    color: rgba(255, 255, 255, 1);
    /*text-align: center;*/
	padding: 22px 0 18px;
}
.c5-h--bg_3 {
	width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
	background-image: url(../images/title_gr_sp.jpg);
    background-size: cover;
	background-position: center right;
	display: block;
    font-size: clamp(23px, 3vw, 32px);
	text-shadow: 0 0 4px rgba(54,71,79,.5);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 2.1px;
    color: rgba(255, 255, 255, 1);
    /*text-align: center;*/
	padding: 22px 0 18px;
}
.h1-inner {
	max-width: 1000px;
	margin: 0 auto;
	display: block;
	padding-left: 20px;
}
@media screen and (min-width: 767px) {
	.c5-h--bg_1 {
		background-image: url(../images/title_pu.jpg);
    	padding: 50px 0 50px;
	}
	.c5-h--bg_2 {
		background-image: url(../images/title_pk.jpg);
    	padding: 50px 0 50px;
	}
	.c5-h--bg_3 {
		background-image: url(../images/title_gr.jpg);
    	padding: 50px 0 50px;
	}
	.h1-inner {
		padding-left: 0;
	}
}

/*ac-label*/
.ac {
	width: 100%;
	margin: 0 auto; }
.ac > li {
	padding-bottom: 0;
	margin-top: 30px;
	background: rgba(51,51,51,1);
    list-style: none; }
.ac-label {
	cursor: pointer;
	position: relative;
	padding: 20px 0;
	height: 30px;
	/* border-top: 1px solid #d9d9d9; */
}
.ac-label:hover {
	opacity: 0.5;
}
.ac-label p {
    padding: 0;
	margin: 0;
    font-weight: 600;
	position: relative;
	width: 100%;
	height: 100%;
	color: rgba(255,255,255,1);
}
.ac-label p::before {
    position: absolute;
	left: 35px;
	display: inline-block;
	content: "Q.";
	font-weight: bold;
	font-size: clamp(18px, 2vw, 21px);
	color: rgba(255,255,255,1);
}
.ac-label p span {
	font-size: clamp(14px, 2vw, 18px);
	display: flex;
	align-items: center;
	position: relative;
    left: 75px;
	width: 85%;
	height: 100%;
}
.c5-li_heading {
	background: rgba(134,143,177,1.00) !important;
}
.c5-li_heading span {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	font-weight: 600;
	font-size: clamp(18px,2vw,21px);
	padding: 15px 0;
}
@media screen and (max-width: 640px) {
	.ac-label {
		padding: 8px 0;
		height: 72px;
	}
	.ac-label p::before {
		top: 25px;
	}
	.ac-label p span {
		width: 63%;
		left: 65px;
	}
	.c5-li_heading span {
		padding: 20px 0;
	}
}
.c5-pink::before {
	position: absolute;
	left: 0;
	top: 0;
	width: 5px;
	height: 100%;
	display: inline-block;
	content: "";
	background: rgba(214,90,90,1);
}
.c5-purple::before {
	position: absolute;
	left: 0;
	top: 0;
	width: 5px;
	height: 100%;
	display: inline-block;
	content: "";
	background: rgba(112,121,233,1);
}
.c5-green::before {
	position: absolute;
	left: 0;
	top: 0;
	width: 5px;
	height: 100%;
	display: inline-block;
	content: "";
	background: rgba(39,155,127,1.00);
}

.ac-content {
	display: none;
	border-top: 1px solid #d9d9d9;
	background: rgba(255,255,255,1);
	padding: 30px;
}
.ac-content p {
    position: relative;
	padding: 0 0 0 2.8rem;
	font-size: clamp(14px, 2vw, 16px);
}
@media screen and (max-width: 640px) {
	.ac-content p {
		padding: 0 0 0 2rem;
	}
}
.ac-content .c5-answer__pink::before {
    position: absolute;
	left: 6px;
	/*top: 50%;*/
	display: inline-block;
	content: "A.";
	font-weight: bold;
	font-size: clamp(18px, 2vw, 21px);
	color: rgba(214,90,90,1);
}
.ac-content .c5-answer__purple::before {
    position: absolute;
	left: 7px;
	display: inline-block;
	content: "A.";
	font-weight: bold;
	font-size: clamp(18px, 2vw, 21px);
	color: rgba(112,121,233,1);
}
.ac-content .c5-answer__green::before {
    position: absolute;
	left: 7px;
	display: inline-block;
	content: "A.";
	font-weight: bold;
	font-size: clamp(18px, 2vw, 21px);
	color: rgba(39,155,127,1.00);
}

/*＋、－切り替え*/
.icon-wrap {
	position: absolute;
	right: 25px;
	top: 50%;
	transform: translatey(-50%);
	width: 38px;
	height: 38px;
	background: transparent; }

.icon {
 	position: relative;
 	display: inline-block;
 	width: 100%;
 	height: 100%;
}
.icon:before, .icon:after {
    position: absolute;
    content: "";
    display: block;
    transition: all 0.4s;
    background: rgba(255,255,255,1);
    left: 50%;
    top: 50%;
    width: 50%;
    height: 2px;
    transform: translate(-50%, -50%);
}
.icon:before {
    transform: translate(-50%, -50%) rotate(90deg);
}
.icon.open:before {
    transform: translate(-50%, -50%) rotate(0deg);
}

/*モーダル*/
.c5-modal {
  display: none;
}
.c5-modal--sp {
  display: none;
}
@media screen and (max-width: 640px) {
  .c5-modal--sp {
    display: flex;
    justify-content: center;
  }
}
.c5-modal__img {
  width: calc(100vw - 50px);
  overflow-x: scroll;
  overflow-y: visible;
}
.c5-modal__img img {
  max-height: calc(100vh - 180px);
}
.c5-modal__img::-webkit-scrollbar {
  height: 4px;
  border-radius: 40px;
  margin-top: 15px;
}
.c5-modal__img::-webkit-scrollbar-track {
  background-color: #2F353D;
}
.c5-modal__img::-webkit-scrollbar-thumb {
  border-radius: 40px;
  background-color: #F2F2F2;
}
.c5-modal__button {
  position: relative;
  display: block;
  font-size: 14px;
  color: rgba(255,255,255,1.00) ;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
  transition: all ease 0.5s;
}
.c5-modal__button::before {
  position: relative;
  content: url(../images/icon-plus.svg);
  padding-right: 5px;
  top: 3px;
}
.c5-modal__button:hover {
  color: #109C94;
  -webkit-text-decoration: #fff;
          text-decoration: #fff;
  font-weight: 600;
  transform-origin: top center;
  transform: scale(1.1);
  transition: all ease 0.5s;
}

.modaal-inner-wrapper {
  max-width: 100%;
}

.modaal-container {
  background: none;
}

.modaal-content-container {
  padding: 0;
}

.modaal-close {
  position: relative;
  top: auto;
  bottom: auto;
  right: auto;
  left: auto;
  width: unset;
  height: unset;
  background: none;
  border-radius: 0;
  display: flex;
  margin-top: 35px;
  margin-left: auto;
  margin-right: auto;
}
.modaal-close:hover {
  background: none;
}
.modaal-close::before {
  position: relative;
  content: url(../images/icon-minus.svg);
  padding-right: 5px;
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
  left: unset;
  top: unset;
  transform: unset;
}
.modaal-close::after {
  display: none;
}
.modaal-close:focus::before, .modaal-close:focus::after, .modaal-close:hover::before, .modaal-close:hover::after {
  background: none;
}

/*フローティングバナー*/
.c5-contact {
  /*display: none;*/ /*※フローティングさせるときはコメントアウト解除して下さい
  position: sticky;
  position: -webkit-sticky;
  left: 0;
  bottom: 0;*/
  background: rgba(0, 0, 0, 0.5);
  text-align: center;
  z-index: 99;
  width: 100%;
  padding: 15px 20px;
  box-sizing: border-box;
}

.c5-contact div {
	display: flex;
	justify-content: center;
	gap: 20px;
}

.c5-btn_contact {
  display: inline-block;
  color: #fff;
  background-color: #2d75c7;
  font-size: clamp(14px, 2vw, 20px);
  font-weight: bold;
  text-decoration: none;
  padding: 10px;
  min-width: 240px;
  box-sizing: border-box;
  border: 1px solid #2d75c7;
}
.c5-btn_contact:first-of-type {
	background-color: #F5683A;
    border-color: #F5683A;
	border: 1px solid #F5683A;
}
@media only screen and (max-width: 756px) {
  .c5-contact div {
	gap: 10px;
  }
  .c5-btn_contact {
    min-width: 165px;
  }
}
.c5-btn_contact:hover {
  text-decoration: none;
  color: #2d75c7;
  background-color: #fff;
}
.c5-btn_contact:first-of-type:hover {
	text-decoration: none;
	color: #F5683A;
    background-color: #fff;
}

.s5-returnToTop {
  z-index: 100;
}

.c5-bnr {
	position: relative;
	max-width: 900px;
	margin: 0 auto;
}
.c5-bnr__img {
	position: relative;
}
.c5-bnr .s5-iconInline {
	position: absolute;
	top: 10px;
	right: 10px;
}
.c5-caption {
  text-align: center;
  font-weight: normal;
  font-size: clamp(17px,3vw,20px);
  margin: 0 auto 50px auto;
}
.c5-pc {
  display: block;
}
@media only screen and (max-width: 756px) {
  .c5-pc {
    display: none;
  }
}

.c5-sp {
  display: none;
}
@media only screen and (max-width: 756px) {
  .c5-sp {
    display: block;
  }
}

ul {
	margin: 0;
	padding-left: 0;
}
